Home / Questions / 556531
Accepted
julio
Asked: 2022-09-13 03:48:09 +0800 CST 2022-09-13 03:48:09 +0800 CST

JS show/hide div: two clicks

  • 772

I have this little code in JS that shows or hides a div. I use it in three sections and the same thing happens in all three: I have to click twice to show the details for the first time. From there it works fine with a single click to both show and hide

<!DOCTYPE HTML>
<html lang="es">
    <head>
        <meta charset = "UTF-8">
        <link rel="stylesheet" type="text/css" href="css/base.css" />
        <link rel="stylesheet" type="text/css" href="css/menu.css" />
        <link rel="stylesheet" type="text/css" href="css/presupuestos_ficha.css" />
        <title>Título de la pagina</title>
        <script>
            function ver_detalles(seccion) {
                if (document.getElementById(seccion).style.display === "none") {
                    document.getElementById("btn_"+seccion).innerHTML = "ocultar detalle";
                    document.getElementById(seccion).style.display = "block";
                    document.getElementById(seccion).style.visibility = "visible";
                } else {
                    document.getElementById("btn_"+seccion).innerHTML = "mostrar detalle";
                    document.getElementById(seccion).style.display = "none";
                    document.getElementById(seccion).style.visibility = "hidden";
                }
            }
        </script>
    </head>
    <body>
        <h4>Desglose de gastos - <span id="btn_detalle_gastos" onclick="ver_detalles('detalle_gastos')">mostrar detalle</span></h4>
        <div id="detalle_gastos"> <!-- este div se carga oculto y se muestra/oculta con la llamada a la función -->
            <div>item 1: $ 32.90</div>
            <div>item 2: $ 72000.00</div>
            <div>item 3: $ 6950.00</div>
            <div>item 4: $ 768.00</div>
            <div>item 5: $ 500.00</div>
        </div>
    </body>
</html>

I have tested the function by placing it in different places on the page and the same thing always happens.

javascript

4 Answers

  1. Well, considering what was mentioned in this comment:

    The behavior should be: when the page loads, the detail should appear hidden and the text should say "show detail". By clicking on "show detail", the detail is shown and the text changes to "hide detail". And vice versa.

    An alternative solution could be to create two classes that serve as a "flag" to show or hide the detail as the case may be.

    Here, I called the classes hidden and shown .

    Since the use of inline events is discouraged , the function call has been moved to the click event , whose handler is added in the DOMContentLoaded event .

    Likewise, ifthe function's view_details checks if the element contains the class hidden . If so, replace this class with shown . In the else, vice versa. The available method for classList was used : replace() , and to search for the class, the contains() method .

    window.addEventListener('DOMContentLoaded', (evento) => {
    document.getElementById('btn_detalle_gastos').addEventListener('click', (evento) => {
        ver_detalles('detalle_gastos');
    });
});

function ver_detalles(seccion) {

    if (document.getElementById(seccion).classList.contains('oculto')) {
        document.getElementById("btn_"+seccion).innerHTML = "ocultar detalle";
        document.getElementById(seccion).classList.replace("oculto", "mostrado");

    } else {
        document.getElementById("btn_"+seccion).innerHTML = "mostrar detalle";
        document.getElementById(seccion).classList.replace("mostrado", "oculto");
    }
}
    .oculto {
    display: none;
    visibility: hidden;
}

.mostrado {
    display: block;
    visibility: visible;
}
    <!DOCTYPE HTML>
<html lang="es">
    <head>
        <meta charset = "UTF-8">
        <title>Título de la pagina</title>
    </head>
    <body>
        <h4>Desglose de gastos - <span id="btn_detalle_gastos">mostrar detalle</span></h4>
        <div id="detalle_gastos" class="oculto">
            <div>item 1: $ 32.90</div>
            <div>item 2: $ 72000.00</div>
            <div>item 3: $ 6950.00</div>
            <div>item 4: $ 768.00</div>
            <div>item 5: $ 500.00</div>
        </div>
    </body>
</html>

    Tested on Firefox v104.0.1.

    • 1

  2. You can use the event ondblclick, where this event occurs when the element is clicked 2 times:

    In your html:

    <!DOCTYPE HTML>
<html lang="es">
    <head>
        <meta charset = "UTF-8">
        <link rel="stylesheet" type="text/css" href="css/base.css" />
        <link rel="stylesheet" type="text/css" href="css/menu.css" />
        <link rel="stylesheet" type="text/css" href="css/presupuestos_ficha.css" />
        <title>Título de la pagina</title>
        <script>
            function ver_detalles(seccion) {
                if (document.getElementById(seccion).style.display === "none") {
                    document.getElementById("btn_"+seccion).innerHTML = "ocultar detalle";
                    document.getElementById(seccion).style.display = "block";
                    document.getElementById(seccion).style.visibility = "visible";
                } else {
                    document.getElementById("btn_"+seccion).innerHTML = "mostrar detalle";
                    document.getElementById(seccion).style.display = "none";
                    document.getElementById(seccion).style.visibility = "hidden";
                }
            }
        </script>
    </head>
    <body>
        <h4>Desglose de gastos - <span id="btn_detalle_gastos" ondblclick="ver_detalles('detalle_gastos')">mostrar detalle</span></h4>
        <div id="detalle_gastos"> <!-- este div se carga oculto y se muestra/oculta con la llamada a la función -->
            <div>item 1: $ 32.90</div>
            <div>item 2: $ 72000.00</div>
            <div>item 3: $ 6950.00</div>
            <div>item 4: $ 768.00</div>
            <div>item 5: $ 500.00</div>
        </div>
    </body>
</html>
    • 0

  3. I leave you an example overriding calling the function from the button, the best way is listening to the event and to avoid conflicts I add the event after finishing loading the DOM, with this you can put the script at the beginning or end of your page.

    window.addEventListener("load", function(event) {
  var btn = document.getElementById('btn_detalle_gastos');
  var detalle = document.getElementById('detalle_gastos');
  //INICIALIZAMOS EL DIV DETALLE OCULTO
  detalle.style.display = "none";
  
  btn.addEventListener('click', function() {
    if (detalle.style.display === "none") {
      btn.textContent = "Ocultar detalle";
      detalle.style.display = "block";
    } else {
      btn.textContent = "Mostrar detalle";
      detalle.style.display = "none";
    }
  });
});
    <!DOCTYPE HTML>
<html lang="es">

<head>
  <title>Título de la pagina</title>
</head>

<body>
  <h4>Desglose de gastos - <span id="btn_detalle_gastos">Mostrar detalle</span></h4>
  <div id="detalle_gastos">
    <!-- este div se carga oculto y se muestra/oculta con la llamada a la función -->
    <div>item 1: $ 32.90</div>
    <div>item 2: $ 72000.00</div>
    <div>item 3: $ 6950.00</div>
    <div>item 4: $ 768.00</div>
    <div>item 5: $ 500.00</div>
  </div>
</body>

</html>

    Tell me if it worked for you.

    • 0
  4. Best Answer

    This is the code I ended up using:

    <!DOCTYPE HTML>
<html lang="es">
    <head>
        <meta charset = "UTF-8">
        <link rel="stylesheet" type="text/css" href="css/base.css" />
        <link rel="stylesheet" type="text/css" href="css/menu.css" />
        <link rel="stylesheet" type="text/css" href="css/presupuestos_ficha.css" />
        <title>Título Pagina</title>
    </head>
    <body>
        <h4>Desglose de gastos - <span id="btn_detalle_gastos" onclick="ver_detalles('detalle_gastos')">mostrar detalle</span></h4>

        <div id="detalle_gastos" class="oculto">
            <div>item 1: $ 32.90</div>
            <div>item 2: $ 72000.00</div>
            <div>item 3: $ 6950.00</div>
            <div>item 4: $ 768.00</div>
            <div>item 5: $ 500.00</div>
        </div>

        <script>
            function ver_detalles(seccion) {

                if (document.getElementById(seccion).classList.contains('oculto')) {
                    document.getElementById("btn_"+seccion).innerHTML = "ocultar detalle";
                    document.getElementById(seccion).classList.replace("oculto", "mostrado");

                } else {
                    document.getElementById("btn_"+seccion).innerHTML = "mostrar detalle";
                    document.getElementById(seccion).classList.replace("mostrado", "oculto");
                }
            }
        </script>

    </body>
</html>

    All the answers helped me and I will adapt the code as suggested for inline events.

    Thank you!

    • 0