Tengo un bucle for each en el archivo blade que muestra elementos.
Lo que quiero cuando se hace clic en el nombre de un elemento solo en el mismo elemento, pero mi código alterna todos los elementos.
¿Cómo resolverlo?
el problema es mi código JavaScript
var isHidden = true; function loadToggleAction() { var sheet = document.createElement('style') if (!isHidden) { sheet.innerHTML = ".show {display:none;}"; } else { sheet.innerHTML = ".show {display:block;}"; } document.body.appendChild(sheet); isHidden = !isHidden; } <h2 class="lesson-h2" onclick="loadToggleAction()"> lesson 1 </h2> <a class="lesson-file" href="{{ " #play " }}"> <img class="show-lesson" src="img.png" title="مشاهده آنلاین این درس" height="24" onclick="loadToggleAction()"> </a> <div class="show"> lesson 1 content </div> <h2 class="lesson-h2" onclick="loadToggleAction()"> lesson 2 </h2> <a class="lesson-file" href="{{ " #play " }}"> <img class="show-lesson" src="img.png" title="مشاهده آنلاین این درس" height="24" onclick="loadToggleAction()"> </a> <div class="show"> lesson 2 content </div> <h2 class="lesson-h2" onclick="loadToggleAction()"> lesson 3 </h2> <a class="lesson-file" href="{{ " #play " }}"> <img class="show-lesson" src="img.png" title="مشاهده آنلاین این درس" height="24" onclick="loadToggleAction()"> </a> <div class="show"> lesson 3 content </div>Si desea hacer esto con CSS, debe calcular una identificación para su componente Lesson-h2 mientras itera (puede hacerlo usando el índice en un bucle for.
Una vez que haga eso, puede cambiar el estilo de visualización en la ID directamente en su función loadToggleAction() (y no en la clase como lo hace en realidad).
Tienes que delegar
No recomiendo crear estilos ya que esto es mucho más sencillo y funciona
document.getElementById('container').addEventListener('click', function(e) { e.preventDefault() const tgt = e.target.closest('a'); if (tgt && tgt.classList.contains('lesson-file')) { tgt.nextElementSibling.classList.toggle('hide') } }) .hide { display:none; } <div id="container"> <h2 class="lesson-h2"> lesson 1 </h2> <a class="lesson-file" href="{{ " #play " }}"> <img class="show-lesson" src="img.png" title="مشاهده آنلاین این درس" height="24" /> </a> <div class="hide"> lesson 1 content </div> <h2 class="lesson-h2"> lesson 2 </h2> <a class="lesson-file" href="{{ " #play " }}"> <img class="show-lesson" src="img.png" title="مشاهده آنلاین این درس" height="24" /> </a> <div class="hide"> lesson 2 content </div> <h2 class="lesson-h2"> lesson 3 </h2> <a class="lesson-file" href="{{ " #play " }}"> <img class="show-lesson" src="img.png" title="مشاهده آنلاین این درس" height="24" /> </a> <div class="hide"> lesson 3 content </div> </div>