How can I show a specific div element with a button click and close all other elements at the same time in jQuery?
For example, I tired:
$('.button').each(function(i) {
$(this).click(function() {
$('.details').eq(i).slideToggle("slow")
$('.button').eq(i);
});
});
.details {
background: grey;
display: none;
}
.is-open {
display: block;
}
<!-- language: lang-html -->
<button id="button0" class="button">button 1</button>
<button id="button1" class="button">button 2</button>
<button id="button2" class="button">button 3</button>
<div class="details" id="details0">
<h1>Details Person 1</h1>
</div>
<div class="details" id="details1">
<h1>Details Person 2</h1>
</div>
<div class="details" id="details2">
<h1>Details Person 3</h1>
</div>
But this only toggles one elements without closing the others. But I want to close every opened element by clicking the one which isn't opened already.
I tried it with the suggested siblings() method but this did not apply for my case because I have my button elements separated from the button elements.
What is the best solution to achieve such an effect described above?
Do you want to implement the tab? https://jqueryui.com/tabs/
$('.button').each(function (i) {
$(this).click(function () {
$('.details').eq(i).show("slow").siblings('.details').hide();
});
});
Here is my solution:
$('.button').each( function(index,button){
//console.log(button.outerHTML);
$(button).click(function(){
let id=this.id.replace("button","");
$(".details").hide()
$("#details"+id).show();
})
});.details {
background: grey;
display: none;
}
.is-open {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button0" class="button">button 1</button>
<button id="button1" class="button">button 2</button>
<button id="button2" class="button">button 3</button>
<div class="details" id="details0">
<h1>Details Person 1</h1>
</div>
<div class="details" id="details1">
<h1>Details Person 2</h1>
</div>
<div class="details" id="details2">
<h1>Details Person 3</h1>
</div>If you adjust your HTML to have data attributes where each button data-id corresponds to a data-id on a details element it makes it much simpler.
// Use event delegation to listen to events from the buttons
$(document).on('click', 'button', handleClick)
function handleClick() {
// Grab the id from the button
const id = $(this).data('id');
// Remove all the `show` classes from the details elements
$('.details').removeClass('show');
// And then add that class back on to the details element
// that corresponds to the id
$(`.details[data-id=${id}]`).addClass('show');
}.details { background: grey; display: none; }
.show { display: block; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-id="1">button 1</button>
<button data-id="2">button 2</button>
<button data-id="3">button 3</button>
<div class="details" data-id="1">
<h1>Details Person 1</h1>
</div>
<div class="details" data-id="2">
<h1>Details Person 2</h1>
</div>
<div class="details" data-id="3">
<h1>Details Person 3</h1>
</div>Additional documentation