1

Estoy intentando hacer que se muestre un div al hacer click en otro div. La cuestión es que me sale bien. El div está oculto al entrar en la página y al hacer clic en +INFO aparece, hasta aquí sin problema. El problema viene en cuanto meto información dentro del div "caja" en el HTML, ya que se muestra directamente el interior del div en cuanto entras a la pagina y no consigo ocultarlo.

var clic = 1;
function divLogin(){
    if(clic==1){
        document.getElementById("caja").style.height = "100px";
    
        clic = clic + 1;
    
    } else {
        document.getElementById("caja").style.height = "0px";
        clic = 1;
    }
}
.segundobloquetercero:hover > div > .opcionesvisiblequinto {
    opacity: 1;
}
.segundobloquetercero:hover > div > .seleccionarvisiblequinto {
    opacity: 1;
}
#infodesplegar{
    font-size: 20px;
    padding: 10px 15px 10px 15px;
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
}
#caja{
    width: 100%;
    margin: auto;
    height: 0px;
    background: #000;
    box-shadow: 10px 10px 3px #D8D8D8;
    transition: height .4s;
}
<div class="segundobloquetercero">
    <div style="display: flex;">
        <div class="titulosh2">
        <h1><span class="titulosh2-estilo">BF.L...</span></h1>
    </div>
    <div class="titulosh2" style="text-align: end;"><img src="https://i.ibb.co/Cw3gnJY/2.png" style="border: 1px solid black; border-radius: 5px;"> <span class="opcioneselegirmetalduro" style="width: 40px; height: 36px;">ISO</span>
    </div>
</div>
<div class="textosh1 visible"><span style="-webkit-text-stroke-width: thin;">Referencia de la placa: <span style="font-weight: 600;">BPL</span></span>
</div>
<div><img src="https://i.ibb.co/HgTnrBN/1.png">
    <div class="seleccionarvisiblequinto" style="margin-top: -110px; position: absolute;">
    <div id="infodesplegar" onclick="divLogin()">+ INFO:</div>
    </div>
</div>
<div id="caja" style="height: 100px;">broquita</div>
<br><br></div>

2 respuestas 2

1

Eso te pasa porque aunque dejes <div id="caja"></div> con height; 0 el contenido desborda el <div>, por lo que se sigue mostrando. Si quieres ocultar el contenido que exceda el tamaño de <div id="caja"></div> podrías usar la propiedad overflow: hidden.

var clic = 1;
function divLogin(){
    if(clic==1){
        document.getElementById("caja").style.height = "100px";
    
        clic = clic + 1;
    
    } else {
        document.getElementById("caja").style.height = "0px";
        clic = 1;
    }
}
.segundobloquetercero:hover > div > .opcionesvisiblequinto {
    opacity: 1;
}
.segundobloquetercero:hover > div > .seleccionarvisiblequinto {
    opacity: 1;
}
#infodesplegar{
    font-size: 20px;
    padding: 10px 15px 10px 15px;
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
}
#caja{
    width: 100%;
    margin: auto;
    height: 0px;
    background-color: grey;
    box-shadow: 10px 10px 3px #D8D8D8;
    transition: height .4s;
    overflow: hidden;
}
<div class="segundobloquetercero">
    <div style="display: flex;">
        <div class="titulosh2">
        <h1><span class="titulosh2-estilo">BF.L...</span></h1>
    </div>
    <div class="titulosh2" style="text-align: end;"><img src="https://i.ibb.co/Cw3gnJY/2.png" style="border: 1px solid black; border-radius: 5px;"> <span class="opcioneselegirmetalduro" style="width: 40px; height: 36px;">ISO</span>
    </div>
</div>
<div class="textosh1 visible"><span style="-webkit-text-stroke-width: thin;">Referencia de la placa: <span style="font-weight: 600;">BPL</span></span>
</div>
<div><img src="https://i.ibb.co/HgTnrBN/1.png">
    <div class="seleccionarvisiblequinto" style="margin-top: -110px; position: absolute;">
    <div id="infodesplegar" onclick="divLogin()">+ INFO:</div>
    </div>
</div>
<div id="caja" style="height: 100px;">broquita</div>
<br><br></div>

1
  • Muchas gracias phpMyGuel, ahora si que lo hace bien. Podria haber estado dandole vueltas y no se me habria ocurrido probarlo con eso.
    – Adrigjg
    el 14 jul. 2022 a las 6:46
0

Como recomendación utiliza let o const para la vaiable,en tu código le dices que el div sea de 100px 0 de 0px pero no modificas lo que hay dentro del div, puedes hacerlo mediante css y si es mediante js te recomiendo que le modifiques la propiedad display como none o block

<div class="segundobloquetercero">
    <div style="display: flex;">
        <div class="titulosh2">
        <h1><span class="titulosh2-estilo">BF.L...</span></h1>
    </div>
    <div class="titulosh2" style="text-align: end;"><img src="https://i.ibb.co/Cw3gnJY/2.png" style="border: 1px solid black; border-radius: 5px;"> <span class="opcioneselegirmetalduro" style="width: 40px; height: 36px;">ISO</span>
    </div>
</div>
<div class="textosh1 visible"><span style="-webkit-text-stroke-width: thin;">Referencia de la placa: <span style="font-weight: 600;">BPL</span></span>
</div>
<div><img src="https://i.ibb.co/HgTnrBN/1.png">
    <div class="seleccionarvisiblequinto" style="margin-top: -110px; position: absolute;">
    <div id="infodesplegar" onclick="divLogin()">+ INFO:</div>
    </div>
</div>
<div id="caja" style="height: 100px;">broquita</div>
<br><br></div>
<style type="text/css">
    .segundobloquetercero:hover > div > .opcionesvisiblequinto {
    opacity: 1;
}
.segundobloquetercero:hover > div > .seleccionarvisiblequinto {
    opacity: 1;
}
#infodesplegar{
    font-size: 20px;
    padding: 10px 15px 10px 15px;
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
}
#caja{
    display: none;
    width: 100%;
    margin: auto;
    height: 0px;
    background: #000;
    box-shadow: 10px 10px 3px #D8D8D8;
    transition: height .4s;
    color: white;
}
</style>
<script type="text/javascript">
    let clic = 1;
    function divLogin(){
        if(clic==1){
            document.getElementById("caja").style.display = "block";
            clic = clic + 1;
        } else {
            document.getElementById("caja").style.display = "none";
            clic = 1;
    }
}
</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.