Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript CSS HTML
Hi friends,
 
I have small problem that I have one main div and in that there are many small divs all are set display=none at page load. Later I will click on buttons then based on the button I have to open a div.
 
I have used the toggle function to hide and show a div but when I click Button2 the first div is still in show() Now I want that when I click a button only that corresponding div has to open and all other div's must be closed or hide.
 
Is it possible with Toggle or some other else?
 
Please do tell me some code for this.
 
Thanks in Advance
Ganesh
Posted 26-Sep-12 0:14am
Ganeshcse2.1K
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

<html>
<head>
 
<script>
//this function will show the content within the <div> tag
function toggleDiv(divName) 
{
  thisDiv = document.getElementById(divName);
  if (thisDiv) 
  {
    if (thisDiv.style.display == "none") {
      thisDiv.style.display = "block";
    }
  }
  else {
    alert("Error: Could not locate div with id: " + divName);
  }
}
 
//this function will hide the content within the <div> tag
function toggleDiv2(divName) 
{
  thisDiv = document.getElementById(divName);
  if (thisDiv) 
  {
    if (thisDiv.style.display == "block") {
      thisDiv.style.display = "none";
    }
  }
  else {
    alert("Error: Could not locate div with id: " + divName);
  }
}
</script>
</head>
 
<body>
<table>
<tr>
<td>
<!-- calls the 'toggleDiv' that shows the <div> -->
<input name="ff1" type=radio value=Y onClick="toggleDiv('showme');">Show
<!-- calls the 'toggleDiv2' that hides the <div> -->
<input name="ff1" type=radio value=N onClick="toggleDiv2('showme');">Hide
</td>
</tr>
<tr>
<td>
<!-- by defualt hide the <div> tag -->
<div id="showme" style="display: none;">
<table width="100%" border="0" cellpadding="1" cellspacing="1">
<tr>
<td><div align="right">Now you can see me, yeay!!</div></td>
<td> </td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
Some other text here
</td>
</tr>
</table>
</body>
</html>
 

</div></div>
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

If you want more finer control then on button click remove display none class only from the div you need to display. You can be sure using class selector to assign display none class to all the other divs.
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

You can try with Show() and Hide() in JQuery.
or refer the below link, which is same.
 
http://jquery.bassistance.de/accordion/demo/[^]
 
Still any issues, you can share your coding.
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 485
1 mhegazy94 460
2 Kornfeld Eliyahu Peter 315
3 Ravi Bhavnani 200
4 Shemeemsha RA 160
0 Sergey Alexandrovich Kryukov 6,890
1 OriginalGriff 6,761
2 CPallini 5,350
3 George Jonsson 3,609
4 Gihan Liyanage 2,797


Advertise | Privacy | Mobile
Web01 | 2.8.140922.1 | Last Updated 26 Sep 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100