Forums

attilahajzer

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.

sheepysheep60

Hey man!

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

<div>
  <h4 class="click">Interested</h4>
  <div class="expand">
    <p>TO PROMOTE JUST YOUR OWN BUSINESS</p>
  </div><!-- end expand !-->
</div>

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/

hoamca

I tested too, it works fine. trick is wrapper

attilahajzer

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

sheepysheep60

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();

    });

});

</script></div><div style="display:block;" ><script>

$(document).ready(function(){

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

    

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

    $(target).slideToggle();

  });

});

</script></div><div style="display:block;" ><script>

$(document).ready(function(){

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

    

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

    $(target).slideToggle();

  });

});

</script></div><div style="display:block;" ><script>

$(document).ready(function(){

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

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

  });

});

You only need ONE of those click(function blocks

Dave

attilahajzer

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.

treehouse : what would you like to learn today?

Forums

jQuery slide Toggle Best Solution.