How to compare two classes with jquery? - html

Question

I want to compare two classes if they're equal to display the content. I have three btns with three different classes and three other divs with three similar classes to buttons. I want to check if Over the button is equal to over the div,then i want to show the element inside over the div, and hide the other elements,and when i click on the under the button i want to do the same, I have tried with Jquery to compare to first get the class name from the button and get the class name from the div and compare them to each other and then give the active class to the one that i want to show it but it seems that i have something wrong
var className = $(this).attr('class');
var tabContent = $('.tab-content').hasClass(className);
var classNameBtnsName = $(this).hasClass(className);
$('button').click(function () {
if (tabContent === classNameBtnsName) {
$('.tab-content').addClass("active-content");
} else {
$('.tab-content').removeClass("active-content");
}
})
.active-content h1{
display:block;
}
h1{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btns-container">
<button class="over">Over</button>
<button class="under">Under</button>
<button class="other">Other</button>
</div>
<div class="tab-content over active-content">
<h1 >Show Over elements</h1>
</div>
<div class="tab-content under">
<h1>Show Under elements</h1>
</div>
<div class="tab-content other">
<h1>Show Other Elements</h1>
</div>

Answer 1

I wouldn't use the class of the buttons to specify which content to toggle. It is better to use a data attribute for that to prevent future developments that add more classes to bug your functionality. Then you can use this data attribute for toggling by removing the active class from all and then adding the class to the element belonging to the clicked button.
$('button.togglebutton').on('click', (e) => {
$('.tab-content').removeClass('active-content');
$('.tab-content.' + $(e.currentTarget).data('active-content')).addClass('active-content');
});
.active-content h1 {
display: block;
}
h1 {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btns-container">
<button data-active-content="over" class="togglebutton">Over</button>
<button data-active-content="under" class="togglebutton">Under</button>
<button data-active-content="other" class="togglebutton">Other</button>
</div>
<div class="tab-content over active-content">
<h1>Show Over elements</h1>
</div>
<div class="tab-content under">
<h1>Show Under elements</h1>
</div>
<div class="tab-content other">
<h1>Show Other Elements</h1>
</div>

Answer 2

Inside the click handler callback function, remove the active-content class from all .tab-content elements first, and then add it to the one that also has the button's class.
$('.btns-container button').on('click', function() {
$('.tab-content').removeClass('active-content');
$('.tab-content.' + this.className).addClass('active-content');
});
.active-content h1{
display:block;
}
h1{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btns-container">
<button class="over">Over</button>
<button class="under">Under</button>
<button class="other">Other</button>
</div>
<div class="tab-content over active-content">
<h1 >Show Over elements</h1>
</div>
<div class="tab-content under">
<h1>Show Under elements</h1>
</div>
<div class="tab-content other">
<h1>Show Other Elements</h1>
</div>

Answer 3

Assuming .tab-content is hidden by default, you can try something like this:
$('button').click(function() {
// Get class from clicked button
var btnClass = $(this).attr('class');
$('.tab-content').each(function() {
// If tab-content has same class as button, show this
if ($(this).hasClass(btnClass)) {
$(this).show();
} else {
$(this).hide();
}
});
});