我需要切换常见问题页面的显示设置。 我制作了一个有效的 js 脚本，但它非常重复，我该如何简化它？

Question

so I'm building a FAQ page that I want a clickable div with the question to display the answer. I wrote the following and it works, but it is not optimal in anyway because I have a function for each div. How can I simplify and optimize this code? I was thinking of using a for loop but got lost in the way.

Here's html:

NOTE 1 : please don't mind the inline styles, I'm planning on moving those to the stylesheet but I was testing independently.

NOTE 2: the {% include tags %} are from liquid variables, the backend will render those properly so please ignore those.

 <div id="question-container1" style="padding: 40px 0 20px 0;" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq1()"> <h3 style="text-align: center; color: #115939; padding-top: 60px;">1. ¿Cuándo recibiré mi terrario?</h3> <span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span> <p id="esconder_faq1" style="display: none; padding: 20px; text-align: center; color: #115939;">Estaremos enviando los terrarios en la primera semana de diciembre.</p> </div> <div id="question-container2" style="padding: 40px 0 20px 0; border-top: 1px solid rgba(17,89,57,.3);" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq2()"> <h3 style="text-align: center; color: #115939;">2. ¿Cómo funciona el envío con plantas?</h3> <span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span> <p id="esconder_faq2" style="display: none; padding: 20px; text-align: center; color: #115939;">Utilizamos envío de UPS para el día siguiente, esto para que las plantas no pasen tanto tiempo en el traslado. Todos pedidos serán envíados de lunes a miércoles, esto para evitar ante cualquier percance, que las plantas pasen el fin de semana en las instalaciones de la mensajería. El envío no tiene costo.</p> </div> <div id="question-container3" style="padding: 40px 0 20px 0; border-top: 1px solid rgba(17,89,57,.3);" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq3()"> <h3 style="text-align: center; color: #115939;">3. ¿Cómo lo armo?</h3> <span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span> <p id="esconder_faq3" style="display: none; padding: 20px; text-align: center; color: #115939;">Te recomendamos armar tu terrario tan pronto lo recibas o colocar las plantas en una maceta para utilizarlas más adelante. Recuerda que puedes agregar más plantas ya estando armado el terrario. Sigue las instrucciones incluídas, o visita este <a href="">link.</a></p> </div> <div id="question-container4" style="padding: 40px 0 20px 0; border-top: 1px solid rgba(17,89,57,.3);" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq4()"> <h3 style="text-align: center; color: #115939;">4. ¿Qué tipos de pago aceptan?</h3> <span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span> <p id="esconder_faq4" style="display: none; padding: 20px; text-align: center; color: #115939;">Aceptamos pagos con tarjeta de crédito, débito, PayPal, pagos en efectivo en Oxxo o transferencia interbancaria SPEI.</p> </div>

And here's javascript

 const despliegueFaq1 = () => { let x = document.getElementById ('esconder_faq1'); if (x.style.display === "none"){ x.style.display = "block"; } else { x.style.display = "none"; } } const despliegueFaq2 = () => { let x = document.getElementById ('esconder_faq2'); if (x.style.display === "none"){ x.style.display = "block"; } else { x.style.display = "none"; } } const despliegueFaq3 = () => { let x = document.getElementById ('esconder_faq3'); if (x.style.display === "none"){ x.style.display = "block"; } else { x.style.display = "none"; } } const despliegueFaq4 = () => { let x = document.getElementById ('esconder_faq4'); if (x.style.display === "none"){ x.style.display = "block"; } else { x.style.display = "none"; } }

Answer 1

On Javascript code, the content of each function is almost the same except the id like esconder_faq1 , esconder_faq2 ...

So ids' are composed with esconder_faq prefix and number.

So you can make a new function that retrieves that index number as param and use that number to get the id like "esconder_faq" + index as follows.

On html, you can call the function with index number like onclick=despliegueFaq(1) .

 const despliegueFaq = (index) => { let x = document.getElementById('esconder_faq' + index); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }

 <div id="question-container1" style="padding: 40px 0 20px 0;" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq(1)"> <h3 style="text-align: center; color: #115939; padding-top: 60px;">1. ¿Cuándo recibiré mi terrario?</h3> <span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span> <p id="esconder_faq1" style="display: none; padding: 20px; text-align: center; color: #115939;">Estaremos enviando los terrarios en la primera semana de diciembre.</p> </div> <div id="question-container2" style="padding: 40px 0 20px 0; border-top: 1px solid rgba(17,89,57,.3);" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq(2)"> <h3 style="text-align: center; color: #115939;">2. ¿Cómo funciona el envío con plantas?</h3> <span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span> <p id="esconder_faq2" style="display: none; padding: 20px; text-align: center; color: #115939;">Utilizamos envío de UPS para el día siguiente, esto para que las plantas no pasen tanto tiempo en el traslado. Todos pedidos serán envíados de lunes a miércoles, esto para evitar ante cualquier percance, que las plantas pasen el fin de semana en las instalaciones de la mensajería. El envío no tiene costo.</p> </div> <div id="question-container3" style="padding: 40px 0 20px 0; border-top: 1px solid rgba(17,89,57,.3);" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq(3)"> <h3 style="text-align: center; color: #115939;">3. ¿Cómo lo armo?</h3> <span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span> <p id="esconder_faq3" style="display: none; padding: 20px; text-align: center; color: #115939;">Te recomendamos armar tu terrario tan pronto lo recibas o colocar las plantas en una maceta para utilizarlas más adelante. Recuerda que puedes agregar más plantas ya estando armado el terrario. Sigue las instrucciones incluídas, o visita este <a href="">link.</a></p> </div> <div id="question-container4" style="padding: 40px 0 20px 0; border-top: 1px solid rgba(17,89,57,.3);" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq(4)"> <h3 style="text-align: center; color: #115939;">4. ¿Qué tipos de pago aceptan?</h3> <span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span> <p id="esconder_faq4" style="display: none; padding: 20px; text-align: center; color: #115939;">Aceptamos pagos con tarjeta de crédito, débito, PayPal, pagos en efectivo en Oxxo o transferencia interbancaria SPEI.</p> </div>

Answer 2

The easy solution here is to use a class to identify all the div s you're interested in taking this action on. Let's say you give each of your div s the class name question :

<div class="question" id="question-container1" style="padding: 40px 0 20px 0;" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq1()">
    <h3 style="text-align: center; color: #115939; padding-top: 60px;">1. ¿Cuándo recibiré mi terrario?</h3>
    <span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span>
    <p id="esconder_faq1" style="display: none; padding: 20px; text-align: center; color: #115939;">Estaremos enviando los terrarios en la primera semana de diciembre.</p>
    
</div>

<div class="question" id="question-container2" style="padding: 40px 0 20px 0; border-top: 1px solid rgba(17,89,57,.3);" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq2()">
    <h3 style="text-align: center; color: #115939;">2. ¿Cómo funciona el envío con plantas?</h3>
    <span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span>
    <p id="esconder_faq2" style="display: none; padding: 20px; text-align: center; color: #115939;">Utilizamos envío de UPS para el día siguiente, esto para que las plantas no pasen tanto tiempo en el traslado. Todos pedidos serán envíados de lunes a miércoles, esto para evitar ante cualquier percance, que las plantas pasen el fin de semana en las instalaciones de la mensajería. El envío no tiene costo.</p>
</div>

<div class="question" id="question-container3" style="padding: 40px 0 20px 0; border-top: 1px solid rgba(17,89,57,.3);" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq3()">
    <h3 style="text-align: center; color: #115939;">3. ¿Cómo lo armo?</h3>
    <span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span>
    <p id="esconder_faq3" style="display: none; padding: 20px; text-align: center; color: #115939;">Te recomendamos armar tu terrario tan pronto lo recibas o colocar las plantas en una maceta para utilizarlas más adelante. Recuerda que puedes agregar más plantas ya estando armado el terrario. Sigue las instrucciones incluídas, o visita este <a href="">link.</a></p>
    
</div>

<div class="question" id="question-container4" style="padding: 40px 0 20px 0; border-top: 1px solid rgba(17,89,57,.3);" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq4()">
    <h3 style="text-align: center; color: #115939;">4. ¿Qué tipos de pago aceptan?</h3>
    <span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span>
    <p id="esconder_faq4" style="display: none; padding: 20px; text-align: center; color: #115939;">Aceptamos pagos con tarjeta de crédito, débito, PayPal, pagos en efectivo en Oxxo o transferencia interbancaria SPEI.</p>
    
</div>

Then all you need to do to refactor this code is the following:

let questions = document.getElementsByClassName("question");

for (var i=0;i<questions.length;i++) {
    var x = questions[i];
    if (x.style.display === "none"){
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    };

At this point you could also reevaluate whether you actually need all those separate id values. If you don't need to identify them separately it might be worthwhile to just get rid of them for simplicity's sake.