0
107
VistasDiv de ancho completo activado por onclick
Mi caja de arena en JSFIDDLE
Cuando se hace clic en 'ABRIR', el div de contenido debería expandirse al ancho completo, pero terminó expandiéndose en 100 px de ancho como en el cuadro rojo. Traté de establecer el width: 100%, en el cuadro gris div y no funcionó.
En la clase .content , tenía el ancho establecido en 100vw sin margin: 0 auto y se expandió al 100% del ancho hacia el lado derecho, no al tamaño de pantalla completa.
[
]
Estoy probando esta función antes de implementarla en mi sitio web.
jQuery-
$(".openit").on("click", function() { $(".expandBG").toggleClass("content"); $(".openit").hide(); $(".closeit").show(); $(".text").delay(500).fadeIn(); }); $(".closeit").on("click", function() { $(".expandBG").toggleClass("content"); $(".openit").show(); $(".closeit").hide(); $(".text").hide(); });html-
<div class="wrapper"> <div class="back">BG <div class="expandBG"> <div class="openit">OPEN</div> <div class="flex-col"> <div class="closeit">CLOSE</div> <div class="content text" style="display: none;"> <div>(CONTENT HERE)</div> </div> </div> </div> </div> </div>CSS-
body { background-color: #000; } .wrapper { width: 100%; margin: 0 auto; text-align: center; border: solid red 1px; } .back { position: relative; color: #fff; width: 110px; height: 110px; background-color: red; margin: 0 auto; text-align: center; display: block; } .expandBG { display: block; width: 100px; height: 100px; transition: ease 0.3s; background-color: #192D38; overflow: hidden; margin: 0 auto; bottom: 0; text-align: center; font-family: sans-serif; color: #fff; position: relative; } .flex-col { flex-direction: column; } .openit { display: block; text-align: center; height: 100%; cursor: pointer; margin: 0 auto; } .closeit { display: block; text-align: center; cursor: pointer; width: 100%; margin: 0 auto; z-index: 1; position: relative; } .text { width: 100%; display: flex; align-items: center; justify-content: center; margin-top: -25px; } .content { width: 100%; height: 50vw; position: relative; margin: 0 auto; }1 Respuestas
Responde la pregunta0
Es por el div con un nombre de clase de back . aumente el ancho de ese div al 100% cuando se haga clic en opneit y luego vuelva a su tamaño original cuando se haga clic en closeit.
// add this to your CSS file .w-full { width: 100% }luego incluya estas dos líneas en su archivo javaScript
$(".openit").on("click", function() { $(".back").addClass("w-full"); // This line has been added to your code. $(".expandBG").toggleClass("content"); $(".openit").hide(); $(".closeit").show(); $(".text").delay(500).fadeIn(); }); $(".closeit").on("click", function() { $(".back").removeClass("w-full"); // This line has been added to your code. $(".expandBG").toggleClass("content"); $(".openit").show(); $(".closeit").hide(); $(".text").hide(); });