Question

I have a simple script. That show and hide a div. But i have a problem with “this”.

This is my script:

var accordion = $(".accordion"),
        content = $(".accordion .content"),
        button  = $(".accordion .btn-1");

    $(button, this).click(function(e){
        e.preventDefault();
        $(content, this).show();
    });

This is my html

<div class="accordion">
    <img src="http://placehold.it/200x130" width="200" height="130" alt="">

    <div class="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        </p>
    </div>
    <a href="#" title="More" class="btn-1">More</a>
</div>

But i have a lot of that divs. Now, when i click on the btn-1. All of the accordions going open. How can i fix that? And how can i closed the content by clicking the btn-1.

Thank for helping!!

Answer 1

You want to open the corresponding .content element when a “button” is clicked. This can be easily solved using DOM traversal ^[docs]:

$(".accordion .btn-1").click(function(e) {
     e.preventDefault();

     // find the button's sibling with class 'content' and show it
     $(this).siblings('.content').show();

     // if you want to toggle the visibility, use .toggle instead
     $(this).siblings('.content').toggle();

     // if the structure is more complex, find the corresponding '.accordion'
     // element first and then search for the '.content' element
     $(this).closest('.accordion').find('.content').toggle();
});

I recommend to read the jQuery tutorials and the API documentation.