Expand and close div's using Javascript

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Bhavs
    New Member
    • Sep 2008
    • 16
    #1

    Expand and close div's using Javascript

    Hi,

    Help with this code pls...

    I ve a javascript which expands a div onclick.
    Code:
     <script language="javascript" type="text/javascript">
     <!--
        function show_hide(obj) { 
        var el = document.getElementById(obj); 
        if ( el.style.display != 'none' ) { 
        el.style.display = 'none'; 
        } 
        else { 
        el.style.display = ''; 
        } 
        } 

    // -->
    </script>
    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
    Tags: None
    • pronerd
      Recognized Expert Contributor
      • Nov 2006
      • 392
      #2
      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?

        Comment

        • Rsmastermind
          New Member
          • Sep 2008
          • 93
          #3
          Please post the Html on which you are opertating this javascript.
          One more thing you have written in the else part like this.

          Code:
          else { 
el.style.display = ''; 
}
          you can write in this way

          Code:
          else { 
el.style.display = 'block'; //this will enable the container
}

            Comment

            • Bhavs
              New Member
              • Sep 2008
              • 16
              #4
              My Html Code looks like this:

              <a class="yellow" href="javascrip t: show_hide(regio n1Div)">Region1 </a>
              <a class="yellow" href="javascrip t: show_hide(regio n2Div)">Region2 </a>
              <a class="yellow" href="javascrip t: show_hide(regio n3Div)">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

                Comment

                • Rsmastermind
                  New Member
                  • Sep 2008
                  • 93
                  #5
                  This is the code which will function well check this it is tested and executed already
                  Code:
                  <html><body>
<a id="region1Div" class="yellow" href="javascript: show_hide(this)">Region1</a> 
<a id="region2Div" class="yellow" href="javascript: show_hide(this)">Region2</a>
<a id="region3Div" class="yellow" href="javascript: show_hide(this)">Region3</a>

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


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

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

<div id="region3Div" visible="false" style=" display: none "> 
Content 3
</div>
</body></html>

function show_hide(that)
{
var links=that.id;
var allDivs=document.getElementsByTagName("DIV");
var divLength=allDivs.length;

for(i=0;i<divLength;i++){

var TheDiv=allDivs[i];
if(links==TheDiv.id){TheDiv.style.display='block';}
else{allDivs[i].style.display='none';}
                              }

}

                    Comment

                    Previous template Next
                    Working...