SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show/Hide Multiple Divs

    I have a script to show/hide one div but want to modify, or use a different one, to show multiple. Each heading should act as the link to show/hide, should be viewable on page load and the contents below both hidden on page load. Example source:

    Code:
    <h2 class="trigger">Menu</h2>
    <div class="hidden">
    blah blah
    </div>
    <h2 class="trigger">Search</h2>
    <div class="hidden">
    search stuff
    </div>
    Not fussed if div classes need changed or IDs used. Currently this is what I use to show/hide one div

    Code:
    <script type="text/javascript">
        $(".hidden").hide();
         $("h2.trigger").toggle(function(){
             $(this).addClass("active");
              }, function () {
             $(this).removeClass("active");
         });
              $("h2.trigger").click(function(){
             $(this).next(".hidden").slideToggle("slow,");
         });
     </script>

    Can anyone help or point me to a (easy to follow!) working script? Many thanks.

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    What's wrong with the script you posted? It seems to work, and it's pretty much what I would have suggested, anyway.
    I'm the web overlord for Graphic Business Systems

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Daz View Post
    Can anyone help or point me to a (easy to follow!) working script?
    What is it about the existing script that you're not happy with?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am new to Jquery.
    I try toggleClass()
    $(this).toggleClass("active");
    Code:
      
    <html>
    <head>
    <title> Untitled </title>
    <style type="text/css">
      .active {color:red;};
    </style>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript">
    // http://api.jquery.com/toggleClass/
    // http://www.akifkaraagac.com/addclass-removeclass-toggleclass-jquery-css-isemleri/
    
    $(document).ready(function(){
        $(".hidden").hide();
        $("h2.trigger").click(function(){
           $(this).toggleClass("active");
           $(this).next(".hidden").slideToggle("slow,");
        });
    });
     </script>
    
    </head>
    <body>
    <h2 class="trigger">Menu</h2>
    <div class="hidden">
    blah blah
    </div>
    <h2 class="trigger">Search</h2>
    <div class="hidden">
    search stuff
    </div>
    </body>
    </html>
    Bismillahirrahmanirrahîm
    Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.


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
  •