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
    234
    Thanks
    111
    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. #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    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.

  3. #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    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();
    });

  4. Users who have thanked glenngv for this post:

    nick2price (04-26-2013)

  5. #4
    Regular Coder
    Join Date
    May 2009
    Posts
    234
    Thanks
    111
    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
  •