La intención es tener un acordeón de dos columnas, sin limitar el campo "expandir" a la columna izquierda o derecha. El problema es que habrá múltiples en una página. Esto ya está creado, pero solo funciona el botón 1. Con la forma en que funciona mi JS, se volverá muy, muy repetitivo: estoy buscando ayuda para volver a escribir el JS para que sea compatible con varios clics. Violín: https://codepen.io/ttattini/pen/abLzaaY
EDITAR: también sería perfecto si un menú desplegable se cerrara cuando se abra el siguiente
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="row"> <div id="column"> <button id="button">I am Button #1</button> <button id="button">I am Button #3</button> </div> <div id="column"> <button id="button">I am Button #2</button> <button id="button">I am Button #4</button> </div> </div> <div id="hidden"> <p id="content"> So here I am #1</p> </div> <div id="hidden"> <p id="content"> So here I am #2</p> </div> <div id="hidden"> <p id="content"> So here I am #3</p> </div> <div id="hidden"> <p id="content"> So here I am #4</p> </div>CSS
#hidden { background: #ccc; margin-top: 2%; overflow: hidden; transition: height 200ms; height: 0; /* <-- set this */ } #button { padding: 10px; margin-top: 5px; width:50%; margin-left: 10%; cursor: pointer; } #row { display: flex; } #column { flex: 50%; }JS
$(function() { var b = $("#button"); var w = $("#hidden"); var l = $("#content"); b.click(function() { if (w.hasClass('open')) { w.removeClass('open'); w.height(0); } else { w.addClass('open'); w.height(l.outerHeight(true)); } }); });El mayor problema es que estás usando ID cuando deberías estar usando clases. Los ID deben ser únicos para cada elemento de una página. Cuando repite una ID, JS solo apuntará al primer elemento que usa esa ID. Por eso solo funciona el primero.
El segundo problema es que, debido a la forma en que está escrito el script, solo se enfocará en un solo elemento. Lo que debe hacer es obtener todos los elementos a los que desea apuntar por algo como su nombre de clase y luego recorrerlos, aplicando el detector de eventos a cada uno y sus elementos secundarios apropiados.
EDITAR: Aquí hay un ejemplo de un código que escribí para una página con varios acordeones hace unas semanas en Vanilla JS
//Below I establish a counting variable and find all the accordions on the page const acc = document.getElementsByClassName( 'accordion' ); let i; //Looping through each accordion for ( i = 1; i <= acc.length; i++ ) { //Identify target for the event listener. In this case, a heading for each accordion, which I've numbered eg "title-1" const title = 'title-' + i; const label = document.getElementById( title ); //Identify target content, in this case a list that has a unique ID eg "list-1" const listNum = 'list-' + i; const list = document.getElementById( listNum ); //Add event listener to heading that toggles the active classes label.addEventListener( 'click', function() { label.classList.toggle( 'accordion--active' ); }); }Por supuesto, hay más de una forma de despellejar a un gato, pero este es un ejemplo práctico.
Rastreé el evento de clic de cada botón y mostré el contenido oculto correspondiente con el uso del atributo de data- .
He usado vainilla JavaScipt en lugar de jQuery.
const buttons = document.querySelectorAll('.button'); const hiddens = document.querySelectorAll('.hidden'); buttons.forEach((btn) => { btn.addEventListener('click', btnClicked) function btnClicked(e) { hiddens.forEach((hidden) => { if(e.target.dataset.btn == hidden.dataset.content) { hidden.classList.toggle('height') } else { hidden.classList.remove('height') } }) } }) .hidden { background: #ccc; margin-top: 2%; padding-left:2%; overflow: hidden; transition: height 200ms; height: 0; /* <-- set this */ } .hidden.height { height: 50px; } .button { padding: 10px; color: white; background-color: #2da6b5; border: none; margin-top: 5px; width:90%; margin-left: 5%; cursor: pointer; } .button:hover { filter: brightness(.9); } #row { display: flex; } .column { flex: 50%; } <div id="row"> <div class="column"> <button class="button" data-btn="one">I am Button #1</button> <button class="button" data-btn="three">I am Button #3</button> </div> <div class="column"> <button class="button" data-btn="two">I am Button #2</button> <button class="button" data-btn="four">I am Button #4</button> </div> </div> <div class="hidden" data-content="one"> <p class="content"> So here I am #1</p> </div> <div class="hidden" data-content="two"> <p class="content"> So here I am #2</p> </div> <div class="hidden" data-content="three"> <p class="content"> So here I am #3</p> </div> <div class="hidden" data-content="four"> <p class="content"> So here I am #4</p> </div>Además, no utilice el mismo ID en varios elementos.