Grow your CSS skills. Land your dream job.

jQuery slide Toggle Best Solution.

  • # January 11, 2012 at 11:02 pm

    Whats the best solution for completing this: http://app4.websitetonight.com/projects/2/3/9/4/2394058/Tools_for_Web_Success2.html

    the website I’m working on.

    scroll down a bit and click the H4 there’s a hidden content that slides out.

    but when multiple on page, it unfolds them all. whats my best option.

    the reason it opens both is because their both set to the same ID’s. and i know that if i set all divs different ID’s it will work. BUT what are my other options? are there any other options?

    here’s the code:

    http://jsfiddle.net/attilahajzer/zx2dk/2/

    Please Help.

    # January 12, 2012 at 12:48 pm

    Hey man!

    So, the way I’d go about this is wrap your pairs of triggers and text in divs. I.E.


    Interested



    TO PROMOTE JUST YOUR OWN BUSINESS



    So, now all we need to do is, find the clicked element (in jQuery, $(this)), find its parent (parent()!) then find its children (children()) but of the class expand (so that becomes children(“.expand”) and then use that variable as the target in the Toggle, BOOM.


    $(document).ready(function(){
    $(".click").click(function(){

    var target = $(this).parent().children(".expand");
    $(target).slideToggle();
    });
    });

    Hope this helps, Dave

    Link: http://jsfiddle.net/sheepysheep60/qdsW8/

    # January 12, 2012 at 3:11 pm

    I tested too, it works fine. trick is wrapper

    # January 12, 2012 at 8:10 pm

    for some problem in demo of the site it Opens, closes and Opens Both:

    http://app4.websitetonight.com/projects/2/3/9/4/2394058/Tools_for_Web_Success2.html

    # January 13, 2012 at 12:01 pm

    Look at your code! You call the .click function about 4 times. So it opens, closes, opens closes AHGHHHHH!!


    $(document).ready(function() {

    $(".click").click(function() {

    $(".expand").slideToggle();

    });

    });

    You only need ONE of those click(function blocks

    Dave

    # January 13, 2012 at 1:45 pm

    oh okay. thats because its on website tonight.
    the reason its there 4 times is because I have to go to page, script and each time i close the window and re-open script it clears every time it sets it. and has default content in there. for some reason i can’t get the original content of the script file. and neither can i clear it! not sure what to do.

    # December 1, 2013 at 2:45 pm

    Hi, thank’s for this script.

    Is possible to make it add a CSS class to H4 when the box is open? The goal is to change the background of H4 when the box is open.

    Thank’s in advance for you help :-)

    # December 24, 2013 at 1:22 pm

    http://codepen.io/attilahajzer/pen/KywLD

    Here’s the pin for it.

    I hope it helps sorry for the delay :)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".