wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes ToggleRows Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "ToggleRows" Watch "ToggleRows" New topic
Author

ToggleRows

Jayasri Alaparthi
Ranch Hand

Joined: Aug 14, 2006
Posts: 67
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61654
    
  67

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


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Jayasri Alaparthi
Ranch Hand

Joined: Aug 14, 2006
Posts: 67
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61654
    
  67

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
Ranch Hand

Joined: Aug 14, 2006
Posts: 67
Hi Bear,


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


with regards,
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61654
    
  67

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

Joined: Aug 14, 2006
Posts: 67
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61654
    
  67

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
Ranch Hand

Joined: Feb 08, 2006
Posts: 948
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
 
Consider Paul's rocket mass heater.
 
subject: ToggleRows