Estoy tratando de desarrollar una página donde habría varios divs, cada uno de estos divs tiene un botón que mostraría un div de estilo "desplegable" debajo cuando se hace clic.
Actualmente tengo un código que cuando se hace clic en un botón, muestra todos los divs de estilo "desplegable" en la página en lugar de solo el que está en el mismo contenedor que el botón.
Me gustaría que esto se hiciera en JavaScript puro sin jquery, cualquier ayuda sería apreciada, ¡gracias!
HTML
<div class="fullResultsContainer"> <div class="resultContainer"> <div class="resultRow"> <!-- This has multiple divs but this is the only one relevant to the issue--> <div class="resultMenu"> <button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog()"> Show activity feed </button> </div> </div> <div class="mobileDropDown"> <p> This is the content I want to show on button click</p> </div> </div> <div class="resultContainer"> <div class="resultRow"> <!-- This has multiple divs but this is the only one relevant to the issue--> <div class="resultMenu"> <button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog()"> Show activity feed </button> </div> </div> <div class="mobileDropDown"> <p> This is the content I want to show on button click</p> </div> </div> </div>JS
function mobileActivityLog() { var btn = document.getElementsByClassName("mobileShowActivityFeedBtn"); var activity = document.getElementsByClassName("mobileDropDown"); for(var i=0; i<btn.length; i++) { for(var j=0; i<activity.length; j++) { if(activity[j].style.display == "none") { activity[j].style.display = "flex" } else { activity[j].style.display = "none" } } } }Creo que la forma más sencilla es enviar un parámetro al método y getElementById con una cadena concatenada con el parámetro.
<div class="fullResultsContainer"> <div class="resultContainer"> <div class="resultRow"> <div class="resultMenu"> <button onclick="mobileActivityLog(1)"> Show activity feed </button> </div> </div> <div class="mobileDropDown-1"> <p> This is the content I want to show on button click</p> </div> </div> <div class="resultContainer"> <div class="resultRow"> <div class="resultMenu"> <button onclick="mobileActivityLog(2)"> Show activity feed </button> </div> </div> <div id="mobileDropDown-2"> <p> This is the content I want to show on button click</p> </div> </div> </div>JS
function mobileActivityLog(index) { var activity = document.getElementsById("mobileDropDown-" + index); if(activity.style.display == "none") { activity.style.display = "flex" } else { activity.style.display = "none" } }Una de las mejores formas posibles de lograr esto es pasar el contexto actual usando 'call' en el HTML. Use este contexto para apuntar al contenedor de resultados requerido (aquí contenedor 'mobileDropDown').
function mobileActivityLog () { var _this = this; var activity = _this.closest('.resultContainer').querySelector(".mobileDropDown"); activity.classList.toggle('hide'); } .hide { display: none; } <div class="fullResultsContainer"> <div class="resultContainer"> <div class="resultRow"> <!-- This has multiple divs but this is the only one relevant to the issue--> <div class="resultMenu"> <button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog.call(this)"> Show activity feed </button> </div> </div> <div class="mobileDropDown"> <p> This is the content I want to show on button click</p> </div> </div> <div class="resultContainer"> <div class="resultRow"> <!-- This has multiple divs but this is the only one relevant to the issue--> <div class="resultMenu"> <button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog.call(this)"> Show activity feed </button> </div> </div> <div class="mobileDropDown"> <p> This is the content I want to show on button click</p> </div> </div> </div>