#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2009
    Posts
    153
    Rep Power
    5

    How do I extend a show function to show a clicked div,while hiding previous div?


    Hello all,

    Looking for some help regarding the following please. I've been playing with it for a while with no sign of progress.

    Id like to use jQuery to allow a user to click a picture, contained within a div, which, once pressed, displays another div where information is held about the picture.

    Then, once they're done with this current picture, id like them to be able to click another div and have that open, while the previous div closes automatically.

    I have only managed to get one div to open, which, granted, is very straight forward, but i dont know how to extend the functionality to allow for the automatic closing - as highlighted above - to happen.

    Code:
    <head>
    <script>
    $(document).ready(function () {
        $("#topLevel").click(function () {
            $("#subLevel").slideToggle("slow");
        });
    });
    </script>
    
    <style>
    #subLevel{ display:none; background-color:silver;}
    #topLevel{ border:1px dashed #3333333;}
    </style>
    </head>
    
    <body>
    
    <div id="topLevel">picture will be </div>
    <div id="subLevel">info about the picture here</div>
    </body>

    I've looked online and found many examples of how to open divs, but cant seem to find any examples that allow for the automatic closing scenario highlighted.

    Hope someone can help.

    Regards
    MG
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    4
    Rep Power
    0
    Try using classes instead ids.
    Try this:
    Code:
    <div class="topLevel">picture will be </div>
    <div class="subLevel">info about the picture here</div>
    
    <div class="topLevel">picture will be </div>
    <div class="subLevel">info about the picture here</div>
    
    <div class="topLevel">picture will be </div>
    <div class="subLevel">info about the picture here</div>
    
    <script>
    $(document).ready(function () {
        $(".topLevel").click(function () {
            var desc = $(this).next(".subLevel");
            $(".subLevel").not(desc).slideUp("slow");
            desc.slideToggle("slow");
        });
    });
    </script>

    Comments on this post

    • Kravvitz agrees
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2009
    Posts
    153
    Rep Power
    5
    Hello,

    Magic, thank you, works a treat.

    Some way to go on the jQuery front for me i feel ! :-)

    Kind regards,
    MG.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Originally Posted by mind_grapes
    I've looked online and found many examples of how to open divs, but cant seem to find any examples that allow for the automatic closing scenario highlighted.
    That kind of thing is often called an "accordion".

    To add to what itborg said, the same ID should not be used for multiple elements in the same document. In other words, any two or more elements on a page may not have the same ID.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo