CODEWITHSUNDEEP
jquerytoggleclass
Tomasz Emeren
Tomasz Emeren

Reputation: 11

Jquery toggleclass for same classes separated

i have problem with toggleClass function for same classes separated

How to make it works for same .toglebox and same .slider separated..

Thanks in advance for any advice.

JS:

$('.togglebox').on('click', function() {
    $('.slider').toggleClass('opened closed');
});

HTML look like this:

<div class="containerslider">
     <div class="slider opened">
         <p>Lorep ipsum </p>
         <p class="slider_wiecej">
             <a href="/portfolio" target="_self" class="read_more_box_slider">more</a>
             <a class="togglebox"></a>
         </p>
     </div>
</div>

<div class="containerslider">
    <div class="slider opened">
         <p>Lorep ipsum </p>
         <p class="slider_wiecej">
             <a href="/portfolio" target="_self" class="read_more_box_slider">more</a>
             <a class="togglebox"></a>
         </p>
    </div>
</div>

Upvotes: 1

Views: 45

Answers (2)

rrk
rrk

Reputation: 15846

Using this object inside the function is what you need. Use this to find parent .slider

$('.togglebox').on('click', function(e) {
  e.preventDefault();
  $(this).closest('div.slider').toggleClass('opened closed');
});
.opened{
  border:1px solid red;
}

.closed{
  border:1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="containerslider">
     <div class="slider opened">
         <p>Lorep ipsum </p>
         <p class="slider_wiecej">
             <a href="/portfolio" target="_self" class="read_more_box_slider">more</a>
             <a class="togglebox">s</a>
         </p>
     </div>
</div>

<div class="containerslider">
    <div class="slider opened">
         <p>Lorep ipsum </p>
         <p class="slider_wiecej">
             <a href="/portfolio" target="_self" class="read_more_box_slider">more</a>
             <a class="togglebox">s</a>
         </p>
    </div>
</div>

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Use closest or parents:

$('.togglebox').on('click', function() {
   $(this) //refer to clicked element
     .closest('.slider') //find nearest parent div with class 'slider'
     .toggleClass('opened closed');//toggle the class
});

Upvotes: 1

Related Questions