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,684
    Mentioned
    99 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
    do righteous deeds
    Join Date
    Aug 2006
    Location
    Türkiye Turkey تركيى
    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>
    The Time Through Ages
    1. By the Time, 2. Verily Man is in loss, 3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.


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
  •