Hiding the Div with JavaScript 2

[bean1234]

Hello All,
I have a scenario where I need to hide all the elements with in a Div after a link is clicked.The elements with in DIv are aslo divs,but when I get the childNodes array by using div.childNodes attribute I always get the length of array as 1 and it doesnt return all the child elements.Please look at the following HTML and the associated JavaScript to understand the problem.

<div  class="d0"> <a href="#" onClick="return toggle

(this);">External</a>

<div class="d1" >
                    
<a>Name</a>
</div>
<div class="d0" >
                    
<a>Publications </a>
</div>
<div class="d1" >
                    
<a >Cybrary Direct</a>
</div>
<a>CEO Express</a>
</div>
</div>

As you can see the a toplevel div encloses other divs, it has a link that calls the following JavaScript function, in the function the length of the childNodes collection is always 1 and unable to iterate over the elemnts in the childNodes collection.

function toggle(parentDiv){
   alert('The length of the childNodes array is '+parentDiv.childNodes.length);
   
  }

 

[Foamcow]

Can't you simply hide the parentDiv?
That will also hide all the children.

<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[cLFlaVA]

if you're hiding everything within the div, why not set the style of the parent div itself to [tt]display: none;[/tt] ?



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

anyway, you're calling the onclick event from your anchor tag, which only has one child, the text that reads "External".



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

as a further example, try these:

<div class="d0"><a href="#" onClick="return toggle(this.parentNode);">External</a>
...

<div class="d0" onClick="return toggle(this);"><a href="#">External</a>
...

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[bean1234]

Thanks Flava, yes you are right I was passing the anchor node , I need to hide the individual divs and not the parent div because the text in the parent div should be visible.

I changed the toggle function as follows..

function toggle(parentDiv){

  alert('The parent id is '+parentDiv.id);
  var temp = parentDiv.childNodes[1];
  do{
     
    temp.style.display ='none';
    temp = temp.nextSibling;
  }
   while(temp != parentDiv.lastChild)
  
}

and I am calling the function by passing the parent node of the anchor as follows..

<div  class="d0"> <a href="#" onClick="return toggle(this.parentNode);">External</a>

which gives the right length of the array as 6 , but I get an error at the following line saying that the style attribute is null..

temp.style.display ='none';

Please note that I am starting the element from 1 in the child nodes this is becuase the first element is always the anchor which I dont want to hide...

 

[bean1234]

Ok I belive the answr to this question depends on how the childNodes attribute works does it include the parent element also within the childNodes collection? can anybody shed some light on this aspect of the problem.

 

[cLFlaVA]

childNodes contain whitespace (depending on the browser you're using). i suggest either using another method (why are you looping through all of the elements?) or perhaps either getting a little tricky with CSS classes, or lastly and least elegantly, removing whitespace.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Foamcow]

How about just putting the elements you wish to hide within another div, give it an ID and hide that by setting its style to display:none?

<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[cLFlaVA]

or you can get jiggy wit' it:

<style type="text/css">
div.hideMe * {
    display: none;
}

.hideMe .alwaysShow {
    display: inline;
}
</style>
<script type="text/javascript">
function toggle(parentDiv){
  parentDiv.className = 'hideMe';
}
</script>

<div id="blah" class="d0">
    <a href="#" class="alwaysShow" onClick="return toggle(this.parentNode);">External</a>
    <div class="d1" >
        <a>Name</a>
    </div>
    <div class="d0" >
        <a>Publications </a>
    </div>
    <div class="d1" >
        <a >Cybrary Direct</a>
    </div>
    <a>CEO Express</a>
</div>

your markup seems excessive. consider cleaning up all those divs. why do you even need them?



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[kaht]

does it include the parent element also within the childNodes

Nope. Consider this example:

<div id="p">
   <span>a</span>
   <span>b</span>
   <span>c</span>
</div>

document.getElementById("p").childNodes is an array that will contain references to the 3 spans (and also all the white space in firefox, IE ignores the whitespace for once....) However, if you need a backward circular reference you can reference the parentElement of any of the elements in the childNodes array to point back to the parent div (this is kinda redundant though). To put it in code:

document.getElementById("p").childNodes[0].parentElement

points right back at the div with the id of "p"

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[bean1234]

Thanks clFlava and Foamcow,I used the approaches suggested by you guys and was able to resolve this issue, thanks again!

 

[bean1234]

ClFlava, I need those divs to display the anchors that I have with alternating colors , right now I am using following the suggestion by Foamcow to have another div on top of those divs and hide that one div instead of hiding the individual divs...

So since I need to display the anchors in alternating colors with how can I achieve it if I dont use div or anyotehr element like span , but as you know span is inline..

 

[cLFlaVA]

you don't need divs to show colors, you can style your anchor tags appropriately. you also don't need another div wrapping these divs, that's all just excessive markup.





*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[bean1234]

IC but I do need a container to put in those divs to have a surroudning area or rectangle to have alternating colors, how is it possible by using just the anchor tags..

also I ma using the following in my toggle fucntion , but it starts working after the second click on the anchor ...

function toggle(parentDiv){
 
  var temp = parentDiv.getElementsByTagName("div");
  temp[0].style.display = (temp[0].style.display == "block") ? "none":"block";
}

 

[cLFlaVA]

try this instead:

  temp[0].style.display = (temp[0].style.display [red]![/red]= "block") ? [red]"block":"none"[/red];

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

(and if that doesn't work, what is your initial style definition?)



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Foamcow]

Well granted it's extra markup, but it's also less Javascript needed to hide it ;-)

The markup could still be considered semantic too since it's denoting a division in the content.

To avoid using the divs you could set the <a> tags to be block level rather than inline with:

a { display:block; }

You might even want to consider using an unordered list <ul>.

<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[cLFlaVA]

how is it less javascript than:

parentDiv.className = 'hideMe';

?



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[bean1234]

clFlava ,

Stiill the same problem by changing teh if statement to the way you suggested, the initial style definition is display: block;