SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hiding content - keeping title/label

    Gudday all
    I have been looking at using JS to hide/show content. It has been harder than I thought and now I am (almostly) shameless using others ideas.

    I have been making progress but have hit a road block. I am 'losing' the section title when I select the show content.
    The code in the body section is
    Code:
    <!-- ACT stockists -->
    <p><a href="#" id="ACT-show" class="showLink" onclick="showHide('ACT');return false;">ACT</a></p>
    <div id="ACT" class="more">
    For your nearest stockists please look at the NSW or Vic lists.
    <p><a href="#" id="ACT-hide" class="hideLink" onclick="showHide('ACT');return false;">Hide this content.</a></p>
    </div>
    whilst the JS itself is
    Code JavaScript:
    <script language="javascript" type="text/javascript">
    function showHide(shID) {
       if (document.getElementById(shID)) {
          if (document.getElementById(shID+'-show').style.display != 'none') {
             document.getElementById(shID+'-show').style.display = 'none';
             document.getElementById(shID).style.display = 'block';
          }
          else {
             document.getElementById(shID+'-show').style.display = 'inline';
             document.getElementById(shID).style.display = 'none';
          }
       }
    }
    </script>
    I an losing the title ACT when I click on the ACT link itself. I would like to keep it visible if possible.
    I am sure the answer is frightfully simple but I cannot find it.

    Also I note that many sites use '+' to expand the content and '-' to hide said content. I presume that those symbols must be images. Is that correct and are they readily available or must one roll their own?
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  2. #2
    SitePoint Evangelist speda1's Avatar
    Join Date
    Jan 2002
    Posts
    550
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you considered using a library like jQuery or Prototype? It will be much faster to write, one line of code to toggle, one line of code to swap an image...

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by speda1 View Post
    Have you considered using a library like jQuery or Prototype? It will be much faster to write, one line of code to toggle, one line of code to swap an image...
    Here for example is the TreeView plugin for jQuery.
    There are several demos of what you can do with it.

    Even if you don't want to use a code library, the demos can be good inspiration for what you want to achieve.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here is a short JS script that hides/shows the content. You can avoid lots of duplication of you set up the display style on page load.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Show/hide</title>
    <script type="text/javascript">
    <!--
     var actObj;  // global
    // set display on target object on page load 
     window.onload=function()
      { actObj=document.getElementById("ACT")
        actObj.style.display="block";
      }
    // ---------
    function showHide() 
     { var hide_show =(actObj.style.display=="block")? "none" : "block";
       actObj.style.display=hide_show;
       return false; 
     }
    // ---
    //-->
    </script>
    <style type="text/css">
    <!--
    body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
    #wrap { position:relative; top:0px; left:0px; width:400px; height:400px; margin-left:100px;  }
    -->
    </style>
    </head>
     
    <body>
     
    <div id="wrap">
      <!-- ACT stockists -->
      <p><a href="#" onclick="return showHide()">Hide/Show Content</a></p>
      <p>ACT</p>
      <div id="ACT">
        <p class="a">For your nearest stockists please look at the NSW or Vic lists.
      </div>
    </div>
    <!-- end wrap -->
     
    </body>
     
    </html>

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still so much to learn.

    Allan P
    Thank you for that. Perhaps I should have explained it just a little more.
    Each state of Australia will have its own section e.g. ACT, NSW, Vic etc:
    Would I need to create
    Code:
    window.onload=function()
    for each state?
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  6. #6
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here is a script that shows/hides each state after you click the state label. The correct <p> is identified using a class name "state". The handler is assigned to each of these on page load. The content divs are also hidden on page load.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Show/Hide All States</title>
    <script type="text/javascript">
    <!--
    // set display on target objects on page load 
     window.onload=function()
      { // hide all divs 
         var allDivsObj=document.getElementById("allDivs");
       // get collection of divs 
         var getDivs=allDivsObj.getElementsByTagName("div");
       // hide all divs to start
         for(var i=0;i<getDivs.length; i++){ getDivs[i].style.display="none"; } 
       //      
       // get collection of Ps with class="state" 
        var getPs=allDivsObj.getElementsByTagName("p");
        for(var i=0;i<getPs.length;i++)
         {// assign onclick handler to each P 
           if(getPs[i].className=="state")
            { getPs[i].onclick=function()
                { var divRef=this.innerHTML;
                  var divObj=document.getElementById(divRef);
                  var hide_show =(divObj.style.display=="block")? "none" : "block";
                  divObj.style.display=hide_show;
                }  
              }                            
         }      
      }
    // ---
    //-->
    </script>
    <style type="text/css">
    <!--
    body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
    #wrap { position:relative; top:0px; left:0px; width:600px; height:600px;   }
    #allDivs { position:absolute; top:20px; left:20px; width:300px;  }
    #allDivs p { margin-top:0px; margin-bottom:10px; cursor:pointer;  }
    .state { font-size:14px; color:#000080; text-decoration:underline; } 
    .a { color:#F00; }
    .b { color:#00F; }
     
    -->
    </style>
    </head>
     
    <body>
     
    <div id="wrap">
      <div id="allDivs">
        <p class="b">Click a State to show/hide details</p>
        <p class="state">ACT</p>
        <div id="ACT">
          <p class="a">For your nearest stockists please look at the NSW or Vic 
          lists.
        </div>
        <p class="state">NSW</p>
        <div id="NSW">
          <p class="a">For your nearest stockists please look at the NSW or Vic 
          lists.
        </div>
        <p class="state">QLD</p>
        <div id="QLD">
          <p class="a">For your nearest stockists please look at the NSW or Vic 
          lists.
        </div>
        <p class="state">VIC</p>
        <div id="VIC">
          <p class="a">For your nearest stockists please look at the NSW or Vic 
          lists.
        </div>
        <p class="state">SA/NT</p>
        <div id="SA/NT">
          <p class="a">For your nearest stockists please look at the NSW or Vic 
          lists.
        </div>
        <p class="state">WA</p>
        <div id="WA">
          <p class="a">For your nearest stockists please look at the NSW or Vic 
          lists.
        </div>
      </div>
      <!-- end allDivs -->
    </div>
    <!-- end wrap -->
     
    </body>
     
    </html>


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
  •