Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Toggle

  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    164
    Thanks
    75
    Thanked 1 Time in 1 Post

    Toggle

    Hi, I am trying to use the toggle class to basically display and hide data. My HTML setup is quite basic
    Code:
          
    <div class="toggle-trigger">
         <p class="toggle-data">meaning</p>
         <div class="toggle-container">
              <p>Pellentesque habitant morbi</p>
         </div>
    </div>
    
    <div class="toggle-trigger">
         <p class="toggle-data">action</p>
         <div class="toggle-container">
               <p>Pellentesque habitant morbi</p>
         </div>
    </div>
    What I am trying to do is on enter page, only display the toggle-data. Then if this is clicked, I then want to display the content within the div. I did manage to get this working, but the next thing I attempted messed me up. I only ever want one toggle thing to be open at a time. So if I open the first one above, and then open the second one, the first one is closed. Is something like this possible? This is my attempt so far, I think I am close but cant figure it out.

    Code:
    $('.toggle-trigger .toggle-data').click(function () {
            var $this = $(this);
            var $parent = $this.parent(".toggle-trigger");
            var $contents = $parent.find(".toggle-container");
    
            if ($contents.is(":visible")) {
                $contents.hide();
            }
            else {
                $contents.show();
            }
    });
    Thanks
    Last edited by VIPStephan; 04-26-2013 at 11:29 AM. Reason: added jQuery title prefix

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    It looks like you are doing an accordion.

    http://jqueryui.com/accordion/
    Last edited by glenngv; 04-26-2013 at 02:46 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    But to solve your problem...

    Code:
    $('.toggle-trigger .toggle-data').click(function () {
            var $this = $(this);
            var $parent = $this.parent(".toggle-trigger");
            var $contents = $parent.find(".toggle-container");
            
            //hide all contents first
            $('.toggle-trigger .toggle-container').hide();
    
            //then show the target content
            $contents.show();
    });
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    nick2price (04-26-2013)

  • #4
    Regular Coder
    Join Date
    May 2009
    Posts
    164
    Thanks
    75
    Thanked 1 Time in 1 Post
    Thanks for the reply. I actually think I am using http://api.jquery.com/toggle/ although it could be the accordian (lost in so much code right now). Your example is perfect, all I had to do extra was hide the contents of the inner div using css otherwise they were all opened when you first visit the page.

    Thanks for the help


  •  

    Posting Permissions

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