Quiero mostrar un párrafo si hago clic en el título. El problema que tengo es que tengo varios títulos con cada uno un párrafo diferente pero solo una función para manejarlo. ¿Es esto posible? La función solo muestra el párrafo del primer título.
he probado con:
document.querySelectorAll(".class1, .class2") document.getElementsByClassName("class1 class2")Ambos no parecen funcionar.
function unhide() { var hid = document.querySelectorAll(".lefthanded", ".measurements"); // Emulates jQuery $(element).is(':hidden'); if(hid[0].offsetWidth > 0 && hid[0].offsetHeight > 0) { hid[0].style.visibility = "visible"; } } <a onclick="unhide()"><h3>Preinstalled Left Hand Kit</h3></a> <div class="lefthanded"> <p>This is the paragraph</p> </div> <a onclick="unhide()"><h3>Product Measurements Requests</h3></a> <div class="measurements"> <p>This is a different paragraph</p>Una de las formas rápidas, fáciles y eficientes de abordar esto es usar una etiqueta <detail> como esta:
<details> <summary>Your Title</summary> <p>This is your paragraph</p> </details> $("#lefthanded").click(function(){ $(".lefthanded").show(); }); $("#measurements").click(function(){ $(".measurements").show(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a id="lefthanded"><h3>Preinstalled Left Hand Kit</h3></a> <div style="display: none;" class="lefthanded"> <p>This is the paragraph</p> </div> <a id="measurements"><h3>Product Measurements Requests</h3></a> <div style="display: none;" class="measurements"> <p>This is a different paragraph</p> </div> La manera fácil de hacer esto es (con Jquery): solo apunte al párrafo Ocultarlo con el método .hide() . Muéstralo al hacer clic con el selector ($selector).click(()=>{$(paragraph#id).show()}) De esta manera, puedes hacer el trabajo fácilmente.