SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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. #2
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I know what you're attempting to do but don't want to guess. Can you link to a screenshot of the issue?

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Screenshot

    Chris,

    Here is a screenshot of the issue:



    Just a note: the top div belongs to Alabama, the bottom one to Massachussets (the correct cities for each State will be pulled from a database later on).


    Hope this helps clarify the problem!

    Thanks,
    oslofish

  4. #4
    SitePoint Enthusiast johnmanoahs's Avatar
    Join Date
    Jul 2004
    Location
    India
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The solution wud be to have a variable to store the currently open div's id. When opening another div, first close the div that is stored in that variable.

    e.g.

    Code:
    var intCurrentOpenID;
    
    function fn_OpenDiv(thisID)
    {
     //First hide the currently open div 
     document.getElementById(intCurrentOpenID).style.display = 'none';
     
     //Then open the div that u want to show
     document.getElementById(thisID).style.display = 'block';
     
     //Set the ID to the variable
     intCurrentOpenID = thisID;
    }
    Hope this is what you are trying to acheive.

    - John
    If you think you are too small to make an
    influence, try sleeping with a mosquito in a closed room.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    John -

    Tried to integrate your code in to my current script (first post), but it did not make a difference. This is what I did:

    Code:
    var intCurrentOpenID;
    
    function fn_OpenDiv(thisID)
    {
     //First hide the currently open div 
     document.getElementById(intCurrentOpenID).style.display = 'none';
     
     //Then open the div that u want to show
     document.getElementById(thisID).style.display = 'block';
     
     //Set the ID to the variable
     intCurrentOpenID = thisID;
    }
    
    function ReverseContentDisplay(d) 
    {if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = ""; 
    }else { document.getElementById(d).style.display = "none"; }}

    Here is the "old" script in action. You'll probably see what I mean when you click on the various states (without manually closing it by clicking on the link again, or hitting the "X"):

    http://www.malernltd.net/tine/show-hide.html


    oslofish

  6. #6
    SitePoint Enthusiast johnmanoahs's Avatar
    Join Date
    Jul 2004
    Location
    India
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I apologize that I couldnt find time to really debug and see whats wrong. On the other hand, I thought I will create a sample quickly for you to build upon the function!!

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    
    <script>
    var intCurrentOpenID = 'link1';
    
    function fn_OpenDiv(thisID)
    {
     //First hide the currently open div 
     document.getElementById(intCurrentOpenID).style.display = 'none';
     
     //Then open the div that u want to show
     document.getElementById(thisID).style.display = 'block';
     
     //Set the ID to the variable
     intCurrentOpenID = thisID;
    }
    </script>
    </HEAD>
    
    <BODY>
    <table width="100%" border="1">
    	<tr>
    		<td width="50%" align="center"><a href="javascript: fn_OpenDiv('link1')">Link 1</a></td>
    		<td width="50%" align="center">Link 2</td>
    	</tr>
    	<tr>
    		<td width="100%" colspan="2" id="link1" style="display: none;">LINK 1 & 2</td>
    	</tr>
    	<tr>
    		<td width="50%" align="center"><a href="javascript: fn_OpenDiv('link2')">Link 3</a></td>
    		<td width="50%" align="center">Link 4</td>
    	</tr>
    	<tr>
    		<td width="100%" colspan="2" id="link2" style="display: none;">LINK 3 & 4</td>
    	</tr>
    </table>
    </BODY>
    </HTML>
    edit: Just note to add a default value to the intCurrentOpenID when you declare. It can be the ID of the first div or can be null and dealt within the function accordingly.

    - John
    If you think you are too small to make an
    influence, try sleeping with a mosquito in a closed room.

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks!

    John -

    Thank you! That works beautifully


Bookmarks

Posting Permissions

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