Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question show/hide script > allow only 1 open div at the time

    Hello -

    I have a show/hide script working nicely, but currently it is allowing more than 1 div to be opened at the time. How can I get it to collapse/hide one div when another is expanded?

    Here is sample code:

    The JavaScript:
    --------------
    Code:
    // SHOW / HIDE CONTENT FUNCTION
    
    function HideContent(d) {document.getElementById(d).style.display = "none";}
    function ShowContent(d) {document.getElementById(d).style.display = "";}
    function ReverseContentDisplay(d) 
    {if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = ""; 
    }else { document.getElementById(d).style.display = "none"; }}
    The HTML:
    ----------
    Trigger link:
    Code:
    <a href="javascript:ReverseContentDisplay('ca')">California</a>
    Hidden div:
    Code:
    <div id="ca" class="city-list" style="display:none;">
                      <table width="100%" border="0" cellspacing="0" cellpadding="0" class="purple">
                        <tr>
                          <td colspan="5" align="right" valign="bottom"><a href="javascript:HideContent('ca')"><img src="assets/img/x-2.gif" alt="x" width="14" height="11" vspace="5" hspace="10" /></a></td>
                        </tr>
                        <tr>
                          <td width="30%"><a href="#">Alameda</a></td>
                          <td width="5%">&nbsp;</td>
                          <td width="30%"><a href="#">Indio</a></td>
                          <td width="5%">&nbsp;</td>
                          <td width="30%"><a href="#">Redlands</a></td>
                        </tr>
                        <tr>
                          <td><a href="#">Culver City</a></td>
                          <td>&nbsp;</td>
                          <td><a href="#">Mission Viejo</a></td>
                          <td>&nbsp;</td>
                          <td><a href="#">San Ramon</a></td>
                        </tr>
                        <tr>
                          <td><a href="#">Hancock Park</a></td>
                          <td>&nbsp;</td>
                          <td><a href="#">Palm Springs</a></td>
                          <td>&nbsp;</td>
                          <td><a href="#">Studio City</a></td>
                        </tr>
                        <tr>
                          <td colspan="5">&nbsp;</td>
                        </tr>
                      </table>
                    </div>
    Your help would be greatly appreciated!

    Thanks,
    oslofish

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    You need to keep track of other open divs and close them when you call open. I suggest a global like this:

    Code:
    var g_openDiv;
    
    function ShowDiv(div)
    {
      if (g_openDiv)
        HideDiv(g_openDiv);
    
      g_openDiv = document.getElementById(div);
      g_openDiv.style.display = "";
    }

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Beagle,

    Thanks for the reply, I appreciate it! My knowledge of JavaScript is still limited, however, so would you mind telling me how to incorporate this into the existing code?


    oslofish

  • #4
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    You need a global variable at the beginning of your script block:

    Code:
    <script type="text/javascript">
    var g_openDiv;
    then you need to modify your current function to do what I said:
    Code:
    function ShowContent(d)
    {
      g_openDiv = document.getElementById(d);
      g_openDiv.style.display = "";
      if (g_openDiv)
        HideContent(g_openDiv);
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •