How to open a div with button click and closing all other divs at the same time in jQuery-CodePudding

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" >button 1</button>
<button id="button1" >button 2</button>
<button id="button2" >button 3</button>

<div  id="details0">
  <h1>Details Person 1</h1>
</div>

<div  id="details1">
  <h1>Details Person 2</h1>
</div>

<div  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?

CodePudding user response：

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();
  });
});

CodePudding user response：

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" >button 1</button>
<button id="button1" >button 2</button>
<button id="button2" >button 3</button>

<div  id="details0">
  <h1>Details Person 1</h1>
</div>

<div  id="details1">
  <h1>Details Person 2</h1>
</div>

<div  id="details2">
  <h1>Details Person 3</h1>
</div>

CodePudding user response：

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  data-id="1">
  <h1>Details Person 1</h1>
</div>

<div  data-id="2">
  <h1>Details Person 2</h1>
</div>

<div  data-id="3">
  <h1>Details Person 3</h1>
</div>

Additional documentation