¿Cómo puedo mostrar un elemento div específico con un clic de botón y cerrar todos los demás elementos al mismo tiempo en jQuery?
Por ejemplo, me cansé:
$('.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>Pero esto solo cambia uno de los elementos sin cerrar los demás. Pero quiero cerrar cada elemento abierto haciendo clic en el que aún no está abierto.
Lo probé con el método brother() sugerido, pero esto no se aplicó en mi caso porque tengo los elementos de mi botón separados de los elementos del botón.
¿Cuál es la mejor solución para lograr el efecto descrito anteriormente?
¿Quieres implementar la pestaña? https://jqueryui.com/tabs/
$('.button').each(function (i) { $(this).click(function () { $('.details').eq(i).show("slow").siblings('.details').hide(); }); });Aquí está mi solución:
$('.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>Si ajusta su HTML para tener atributos de datos donde cada ID de datos del botón corresponde a un ID de datos en un elemento de detalles, lo hace mucho más simple.
// 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>Documentación adicional