Apply CSS only on one div instead of all divs with “this” selector

Question

I have 4 div containers which have all the same classes. Within the div containers I can click on "Show more" to animate another div container within more informations. In this other container, I can click on "Go back" to show the origin one. Right now, when I click one of the 4 containers, all of them toggle at the same time.

How can I apply the animation (ease) only of the container I clicked it's p element?

This is my HTML code (for one div container, the rest of the containers are exact the same):

<div class="photo_box ">
   <div class="card-more-informations">
      <p>Show more</p>

      <div class="more-information-container">
         <p> Lorem ipsum dolor</p>
         <h1>Go back</h1>
      </div>
   </div>
</div>

And this is my jquery code:

$('.card-more-informations > p').on('click', function() {
         $('.more-information-container').css({"right": "0%"})
    });

    $('.more-information-container > h1').on('click', function() {
        $('.more-information-container').css({'right': ''})
    });

Right now, when I click the p element with "Show more" all containers with class more-information-container opens at the same time. And when I click then "Go back" all containers close at the same time. I want that only the container opens and closes where I have clicked it's p respectively h1 element.

(I didn't post CSS because it's I guess unecessary in order to solve my problem.)

Thanks in advance!

Answer 1

Using this will refer to the element being clicked on, so change your code to:

$('.card-more-informations > p').on('click', function() {
     $(this).next('.more-information-container').css({"right": "0%"})
});

$('.more-information-container > h1').on('click', function() {
    $(this).parent('.more-information-container').css({'right': ''})
});

Here we use .next() and .parent() to select the appropriate elements. We also pass in the class '.more-information-container' to make sure that's the only thing we can select.

 $('.card-more-informations > p').on('click', function() { $(this).next('.more-information-container').css({ "color": "red" }) }); $('.more-information-container > h1').on('click', function() { $(this).parent('.more-information-container').css({ 'color': 'black' }) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="photo_box "> <div class="card-more-informations"> <p>Show more</p> <div class="more-information-container"> <p> Lorem ipsum dolor</p> <h1>Go back</h1> </div> </div> </div> <div class="photo_box "> <div class="card-more-informations"> <p>Show more</p> <div class="more-information-container"> <p> Lorem ipsum dolor</p> <h1>Go back</h1> </div> </div> </div> <div class="photo_box "> <div class="card-more-informations"> <p>Show more</p> <div class="more-information-container"> <p> Lorem ipsum dolor</p> <h1>Go back</h1> </div> </div> </div> 

^{(In the preceding code snippet I use colors to illustrate the change)}