• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

ToggleRows

 
Jayasri Alaparthi
Ranch Hand
Posts: 67
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65216
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
That's a simple matter of event handling and CSS to hide and show the elements. What have you written so far?
 
Jayasri Alaparthi
Ranch Hand
Posts: 67
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65216
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 67
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Bear,


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


with regards,
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65216
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Please go back as instructed and add code tags to make your code retain its formatting and readability.
 
Jayasri Alaparthi
Ranch Hand
Posts: 67
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65216
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 948
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic