you can use $(this) instead of getting element using class. you need to have knowledge about how this keyword works in JavaScript.
(function ($) {
var allPanels = $('.elementor-accordion-item > .elementor-tab-content').hide();
$('.elementor-accordion-item > .elementor-tab-title > a').click(function () {
if (!$(this).parent().hasClass('elementor-active')) {
allPanels.slideUp();
allPanels.prevObject.find('.elementor-active').removeClass('elementor-active');
$(this).parent().addClass('elementor-active')
$(this).parent().next().slideDown();
}
else {
allPanels.slideUp();
allPanels.prevObject.find('.elementor-active').removeClass('elementor-active');
}
return false;
});
})(jQuery);
.elementor-accordion {
margin: 50px;
}
.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content {
padding: 10px;
border: 1px solid black;
border-bottom: 0;
}
.elementor-accordion .elementor-tab-title:last-of-type,
.elementor-accordion .elementor-tab-content:last-of-type {
border-bottom: 1px solid black;
}
.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-tab-content a {
display: block;
color: black;
font-weight: bold;
}
.elementor-accordion .elementor-tab-content {
border-top: 0;
font-size: 12px;
}
.elementor-accordion .elementor-tab-content:last-of-type {
border-top: 1px solid white;
position: relative;
top: -1px;
}
a {
text-decoration: none;
}
body {
font: 16px Sans-Serif;
}
.elementor-tab-title.elementor-active {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="elementor-accordion">
<div class="elementor-accordion-item">
<div class="elementor-tab-title"><a href="">Panel 1</a></div>
<div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
</div>
<div class="elementor-accordion-item">
<div class="elementor-tab-title"><a href="">Panel 2</a></div>
<div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
</div>
<div class="elementor-accordion-item">
<div class="elementor-tab-title"><a href="">Panel 3</a></div>
<div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
</div>
</div>
Here’s some changes
Just remove before adding class $('.elementor-tab-title').removeClass('elementor-active');
and add class to targeted element $(this).parent().addClass('elementor-active');
Edit:
If you want a toggle then you can check using $(this).parent().hasClass('elementor-active') if element has a class or not and take action as bellow.
(function($) {
var allPanels = $('.elementor-accordion-item > .elementor-tab-content').hide();
$('.elementor-accordion-item > .elementor-tab-title > a').click(function() {
//allPanels.slideUp();
if($(this).parent().hasClass('elementor-active')){
$(this).parent().removeClass('elementor-active').next().slideUp();
} else {
$(this).parent().addClass('elementor-active').next().slideDown();
}
return false;
});
})(jQuery);
.elementor-accordion {
margin: 50px;
}
.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content {
padding: 10px;
border: 1px solid black;
border-bottom: 0;
}
.elementor-accordion .elementor-tab-title:last-of-type,
.elementor-accordion .elementor-tab-content:last-of-type {
border-bottom: 1px solid black;
}
.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-tab-content a {
display: block;
color: black;
font-weight: bold;
}
.elementor-accordion .elementor-tab-content {
border-top: 0;
font-size: 12px;
}
.elementor-accordion .elementor-tab-content:last-of-type {
border-top: 1px solid white;
position: relative;
top: -1px;
}
a {
text-decoration: none;
}
body {
font: 16px Sans-Serif;
}
.elementor-tab-title.elementor-active {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="elementor-accordion">
<div class="elementor-accordion-item">
<div class="elementor-tab-title"><a href="">Panel 1</a></div>
<div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
</div>
<div class="elementor-accordion-item">
<div class="elementor-tab-title"><a href="">Panel 2</a></div>
<div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
</div>
<div class="elementor-accordion-item">
<div class="elementor-tab-title"><a href="">Panel 3</a></div>
<div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
</div>
</div>
This might be what you’re looking for. I have seperated the add and remove class for clarity.
(function($) {
var allPanels = $('.elementor-accordion-item > .elementor-tab-content').hide();
$('.elementor-accordion-item > .elementor-tab-title > a').click(function() {
allPanels.slideUp();
$('.elementor-accordion-item > .elementor-tab-title').removeClass('elementor-active');
$(this).parent().addClass('elementor-active');
$(this).parent().next().slideDown();
return false;
});
})(jQuery);
.elementor-accordion {
margin: 50px;
}
.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content {
padding: 10px;
border: 1px solid black;
border-bottom: 0;
}
.elementor-accordion .elementor-tab-title:last-of-type,
.elementor-accordion .elementor-tab-content:last-of-type {
border-bottom: 1px solid black;
}
.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-tab-content a {
display: block;
color: black;
font-weight: bold;
}
.elementor-accordion .elementor-tab-content {
border-top: 0;
font-size: 12px;
}
.elementor-accordion .elementor-tab-content:last-of-type {
border-top: 1px solid white;
position: relative;
top: -1px;
}
a {
text-decoration: none;
}
body {
font: 16px Sans-Serif;
}
.elementor-tab-title.elementor-active {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="elementor-accordion">
<div class="elementor-accordion-item">
<div class="elementor-tab-title"><a href="">Panel 1</a></div>
<div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
</div>
<div class="elementor-accordion-item">
<div class="elementor-tab-title"><a href="">Panel 2</a></div>
<div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
</div>
<div class="elementor-accordion-item">
<div class="elementor-tab-title"><a href="">Panel 3</a></div>
<div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
</div>
</div>
I’m working on the accordion tabs here on active I want to add the class .elementor-active in the ‘.elementor-tab-title’ but when I tried to add active class it is added to all ‘.elementor-tab-title’ I also used .siblings() and children() but still not working can anyone point me in the right direction.
(function($) {
var allPanels = $('.elementor-accordion-item > .elementor-tab-content').hide();
$('.elementor-accordion-item > .elementor-tab-title > a').click(function() {
allPanels.slideUp();
$('.elementor-accordion-item > .elementor-tab-title').addClass('elementor-active').closest().find('.elementor-active').removeClass('elementor-active');
$(this).parent().next().slideDown();
return false;
});
})(jQuery);
.elementor-accordion {
margin: 50px;
}
.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content {
padding: 10px;
border: 1px solid black;
border-bottom: 0;
}
.elementor-accordion .elementor-tab-title:last-of-type,
.elementor-accordion .elementor-tab-content:last-of-type {
border-bottom: 1px solid black;
}
.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-tab-content a {
display: block;
color: black;
font-weight: bold;
}
.elementor-accordion .elementor-tab-content {
border-top: 0;
font-size: 12px;
}
.elementor-accordion .elementor-tab-content:last-of-type {
border-top: 1px solid white;
position: relative;
top: -1px;
}
a {
text-decoration: none;
}
body {
font: 16px Sans-Serif;
}
.elementor-tab-title.elementor-active {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="elementor-accordion">
<div class="elementor-accordion-item">
<div class="elementor-tab-title"><a href="">Panel 1</a></div>
<div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
</div>
<div class="elementor-accordion-item">
<div class="elementor-tab-title"><a href="">Panel 2</a></div>
<div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
</div>
<div class="elementor-accordion-item">
<div class="elementor-tab-title"><a href="">Panel 3</a></div>
<div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
</div>
</div>
@RaviMakwana onClick active tab is visible and other tabs are getting close how can we make them as a toggle. so that other tabs are not closed automatically when one of the tabs is closed.
