ToggleRows

[Jayasri Alaparthi]

Hi friends,

Can some one help me in writing the javascript funtion for toggle rows.
I have 17 products in html check box, for each products there are subproducts for example
Product 1
See all subproducts
[Item1
Item2
Item3
Item4
Item 5
Hide all subproducts]
when I click See all subproducts it has to display all the items with hide all subproduct, and when I click Hide all subproducts
it has to show
Product 1
See all subproducts


with regards,

[Bear Bibeault]

That's a simple matter of event handling and CSS to hide and show the elements. What have you written so far?

[Jayasri Alaparthi]

Hi,
These is the code I wrote till now, its showing and show and hide only for the first product, I want it for all the products

function toggleRows(parentid)
{

debugger;
var nodes = document.getElementById(parentid).parentNode.childNodes;
for( var i=0;i<nodes.length;i++)
{
if (nodes[i].id.length > 4 && nodes[i].id.substring(0,4) == parentid) {
if(nodes[i].style.display =='' || nodes[i].style.display =='none'){
nodes[i].style.display ='block';
document.getElementById("show").style.display="none";
document.getElementById("hide").style.display="block";
}
else{
nodes[i].style.display ='none';
document.getElementById("show").style.display="block";
document.getElementById("hide").style.display="none";
}

}
}
}



<td colspan='3'>
<div id="show" style="display:block"><a href='<%="javascript:toggleRows(\""+prodTree.getKey()+"\")"%>' class="subproducts">See All Subproducts</a></div>
<div id="hide" style="display:none"><a href='<%="javascript:toggleRows(\""+prodTree.getKey()+"\")"%>' class="subproducts">Hide All Subproducts</a></div>
</td>

[Bear Bibeault]

Please be sure to use UBB code tags when posting code to the forums. Unformatted code is extermely hard to read and many people that might be able to help you will just move along. Please read this for more information.

You can go back and change your post to add code tags by clicking the .

[Jayasri Alaparthi]

Hi Bear,


If you understand my code can you give me some idea.


with regards,

[Bear Bibeault]

Please go back as instructed and add code tags to make your code retain its formatting and readability.

[Jayasri Alaparthi]

Hi,
These is the code I wrote till now, its showing and show and hide only for the first product, I want it for all the products

function toggleRows(parentid)
{

debugger;
var nodes = document.getElementById(parentid).parentNode.childNodes;
for( var i=0;i<nodes.length;i++)
{
if (nodes[i].id.length > 4 && nodes[i].id.substring(0,4) == parentid) {
if(nodes[i].style.display =='' || nodes[i].style.display =='none'){
nodes[i].style.display ='block';
document.getElementById("show").style.display="none";
document.getElementById("hide").style.display="block";
}
else{
nodes[i].style.display ='none';
document.getElementById("show").style.display="block";
document.getElementById("hide").style.display="none";
}

}
}
}



<td colspan='3'>
<div id="show" style="display:block"><a href='<%="javascript:toggleRows(\""+prodTree.getKey()+"\")"%>' class="subproducts">See All Subproducts</a></div>
<div id="hide" style="display:none"><a href='<%="javascript:toggleRows(\""+prodTree.getKey()+"\")"%>' class="subproducts">Hide All Subproducts</a></div>
</td>

[Bear Bibeault]

Bhargavi kurra, Please read this for information on how to properly post code. I will not read code that has not been posted properly in order to preserve its formatting.

If you want people to take the time to help you, you've got to put some effort into it yourself.
[ March 14, 2008: Message edited by: Bear Bibeault ]

[Brent Sterling]

First off, what are you using to debug this on your own? I would recommend that you try Firefox along with Firebug (http://www.getfirebug.com/). This approach sure seems easier than waiting for somebody on a forum to debug your code.

The code 'document.getElementById("show")' seems a little odd. I would wonder if the code is bombing there after processing the first node.

- Brent