Hide all other Div's when I click on one div

Question

0.00/5 (No votes)

See more:

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

Ganesh KP

Add a Solution

3 solutions

Solution 2

HTML

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

Posted 26-Sep-12 1:22am

wings_

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.

Posted 26-Sep-12 0:22am

Arunprasath Natarajan

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Peeyush Pachaori · Accepted Answer · 2012-09-26T01:53:00

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.

Posted 26-Sep-12 1:53am

Peeyush Pachaori