By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,850 Members | 1,985 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,850 IT Pros & Developers. It's quick & easy.

Expand and close div's using Javascript

P: 16
Hi,

Help with this code pls...

I ve a javascript which expands a div onclick.
Expand|Select|Wrap|Line Numbers
  1.  <script language="javascript" type="text/javascript">
  2.      <!--
  3.         function show_hide(obj) { 
  4.         var el = document.getElementById(obj); 
  5.         if ( el.style.display != 'none' ) { 
  6.         el.style.display = 'none'; 
  7.         } 
  8.         else { 
  9.         el.style.display = ''; 
  10.         } 
  11.         } 
  12.  
  13.     // -->
  14.     </script>
  15.  
I have a page with Content list on the left, When clicked on the content name, its description expands on the right.

I am using the above javascript to do the same

But the problem is,
When u click a content its description expands, then when u click the next content even its description expands. But t previous one doesn't collapse.


Pls help me how to just show one div content at a time


Many Thanks
Bh
Sep 25 '08 #1
Share this Question
Share on Google+
4 Replies


Expert 100+
P: 392
Since your question relates to the code calling this function it would be better to provide that code instead. Are you making a second call to the function you provided to collapse that other layers?
Sep 25 '08 #2

P: 93
Please post the Html on which you are opertating this javascript.
One more thing you have written in the else part like this.

Expand|Select|Wrap|Line Numbers
  1. else { 
  2. el.style.display = ''; 
you can write in this way

Expand|Select|Wrap|Line Numbers
  1. else { 
  2. el.style.display = 'block'; //this will enable the container
Sep 26 '08 #3

P: 16
My Html Code looks like this:

<a class="yellow" href="javascript: show_hide(region1Div)">Region1</a>
<a class="yellow" href="javascript: show_hide(region2Div)">Region2</a>
<a class="yellow" href="javascript: show_hide(region3Div)">Region3</a>

<div id="region1Div" visible="false" style=" display: none ">
Content 1
</div>

<div id="region2Div" visible="false" style=" display: none ">
Content 2
</div>
.
.
.
.

I am not using a second call to the function to collapse other layers
I Know i need to use an array for that. But I am not sure how to write it in a javascript.
Pls Help...

Thanks..
Bh
Sep 26 '08 #4

P: 93
This is the code which will function well check this it is tested and executed already
Expand|Select|Wrap|Line Numbers
  1. <html><body>
  2. <a id="region1Div" class="yellow" href="javascript: show_hide(this)">Region1</a> 
  3. <a id="region2Div" class="yellow" href="javascript: show_hide(this)">Region2</a>
  4. <a id="region3Div" class="yellow" href="javascript: show_hide(this)">Region3</a>
  5.  
  6. //In the above code I had mentioned the id of the hyperlinks as same as they correspond to the div like for first link first div 
  7.  
  8.  
  9. <div id="region1Div" visible="false" style=" display: none "> 
  10. Content 1
  11. </div>
  12.  
  13. <div id="region2Div" visible="false" style=" display: none "> 
  14. Content 2
  15. </div>
  16.  
  17. <div id="region3Div" visible="false" style=" display: none "> 
  18. Content 3
  19. </div>
  20. </body></html>
  21.  
  22. function show_hide(that)
  23. {
  24. var links=that.id;
  25. var allDivs=document.getElementsByTagName("DIV");
  26. var divLength=allDivs.length;
  27.  
  28. for(i=0;i<divLength;i++){
  29.  
  30. var TheDiv=allDivs[i];
  31. if(links==TheDiv.id){TheDiv.style.display='block';}
  32. else{allDivs[i].style.display='none';}
  33.                               }
  34.  
  35. }
Sep 26 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.