Forums

Give help. Get help.

  • # 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 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

    # 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 :-)

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag