Question

I’m getting myself really confused trying to hide the next Div with a class of .video on a page. I’m trying to have it so a later div on the page with the same class isn’t effected by an input button element and only the next div with the class of “.video” after the button, if that makes sense.

I currently have it so all the div’s are being effected, I’ve tried to use .next and .find, but for the life of me, I can’t get it to work, I’ve tried googling around for a solution, but all seem to be not quite exactly what I need, perhaps I google’d the wrong thing, I’m not sure, but hopefully someone can provide some form of answer for me here so my mind can finally be at ease!

So this is the page currently

As you can see, the button hides/shows the elemnt as it should… but it effects the later element also.

I’m not really sure how to go about writing a script usign jQuery so the later one isn’t effected… I’ve rattled my brain, but perhaps it’s so late at night (or morning, rather!) that I just can’t comprehend it in my drowzy state…

Hopefully one of you will be able to tell me what to do.

The script I’m currently using can also be found here

I appreciate any help, thanks.

Answer 1

try with this:

$(document).ready(function(){
  $('.showhide').click(function(){
    $(this).parent().next('.video').toggle();
    //------^^^^^^^^^^^^^------------------------added to find the video of the parent's next
       if($('.video').is(':visible')){
          $('.showhide').attr('value','Hide Video');;
       } else {
          $('.showhide').attr('value','Show Video');;
       }
   });
});

i used your html in the fiddle,
see the fiddle: http://jsfiddle.net/8h7hP/