Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
I would like to use this script but have it display multiple divs that all have the same ID at the same time? Does anyone know how to achieve this?
I have come up with a script that achieves this but it is slow...I would prefer to use getbyelementId...
Here is my script below:
function promoBox(checked){
var count = document.all['required'].length
for (var i = 0; i < count; i++)
{
var elem = document.all[i];
if (elem.id == 'required') {
elem.style.display = checked ? "block" : "none";
}
}
}
This is the Offer
-
I wouldn't recommend using div's with the same ID... the point of an id is to have it unique.
-
You can't give two elements the same ID, What you can do is give your elements a class name... Then use this to search out all the elements with said class name.
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
function promoBox(checked){
// this searches for all elements with the class name required
// and creates an array
var el = getElementsByClass('required');
// this loops thru the array and sets the style you want
for (var i=0; i < el.length; i++){
el[i].style.display = checked ? "block" : "none";
}
}
You can learn more about this function at http://www.dustindiaz.com/getelementsbyclass/ -
- CommentAuthorWithoutReason
- CommentTimeOct 21st 2006
or you can just place those divs + unique ids in one container div with a toggle_container_display as an id
then you would just write:
// DOM check begins... so you can use this with IE 4/5.5/6/7 FF+ Moz+ & latest NS
var isALL = 0;
var isID = 0;
var isDHTML = 0;
if (document.getElementById) {isID = 1; isDHTML = 1;}
else {
if (document.all) {isALL = 1; isDHTML = 1;}
}
function checkDOM(object_id) {
if (isID) { return (document.getElementById(object_id).style) ; }
if (isALL) { return (document.all[object_id].style) ; }
}
// DOM check ends
var toggle_status = "on";
function toggle_display(id_name) {
if (toggle_status == "on") {
dom = checkDOM(id_name); //send id_name to use All or ID
dom.display = "none";
toggle_status = "on";
} else {
dom = checkDOM(id_name); //send id_name to use All or ID
dom.display = "block";
toggle_status = "off";
}
}
NOW in the html
<div id="background_id">background</div>
<div id="toggle_display_container">
<div id="header_id">header</div>
<div id="links_id">links</div>
<div id="footer_id">footer</div>
</div>
<div id="content_id">content</div>
i make typos a lot so copy paste and debug the code if need be but the above script should display:none (hide) everything in that container... background_id & content_id should keep their display:block (visibility)
i read books & search the net for css+javascript stuff so... you'll eventually find a DOM checker as i did... but for now here's the version i use for "dynamic" x/html -
or you can use a library script.
here's a one-liner that should do something like what you want using jquery:
$('.expandable').toggle(
function(){$(this).hide()},
function(){$(this).show()});
1 to 5 of 5