Tengo 2 elementos div, y quiero agregar algo en el Div 2 que cuando haga clic en ese Div, mostrará Div 1, ¡así que ambos DIV estarán visibles al hacer clic en Div 2! Div 2 debe permanecer visible todo el tiempo, pero cuando hago clic en DIV 2, ¡debe mostrar Div 1!
¡Quiero un script JS!
.box1 { display: none; color: white; font-weight: 100; background-color: rgba(234, 21, 56, 0.3); font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; border: 3px solid #ea1538; width: 200px; max-height: 300px; overflow: scroll; margin-left: 20px; margin-top: 40px; transition: ease 0.5s; padding: 10px 10px; box-sizing: border-box; box-shadow: 0px 0px 10px gainsboro; } .box1::-webkit-scrollbar { display: none; } .box1:hover { transition: ease 0.5s; transform: scale(1.1); } #cover1 { width: 100%; height: 40%; } .box2 { display: inline-block; color: white; font-weight: 100; background-color: rgba(234, 21, 56, 0.3); font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; border: 3px solid #ea1538; width: 200px; max-height: 300px; overflow: scroll; margin-left: 1%; margin-top: 40px; transition: ease 0.5s; padding: 10px 10px; box-sizing: border-box; box-shadow: 0px 0px 10px gainsboro; } .box2::-webkit-scrollbar { display: none; } .box2:hover { transition: ease 0.5s; transform: scale(1.1); } #cover2 { width: 100%; height: 40%; } <div class="box1"> <img src="/images/Books/book_bg.jpg" alt="cover" id="cover1" /> <h3 class="desc1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et iste ipsum harum beatae dolor fugit repudiandae a quaerat doloremque pariatur, suscipit molestias ipsa minus. Non explicabo quam quasi illo accusamus aliquid, reiciendis autem? Quas odio hic pariatur necessitatibus nobis nisi fugiat ab voluptate. Perferendis maiores quisquam cumque quod aspernatur ipsa? </h3> </div> <div class="box2"> <button type="button" id="box2btn" onclick="href='window.location.https://www.facebook.com'"> <img src="/images/Books/book_bg.jpg" alt="cover" id="cover2" /> <h3> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi natus quidem perferendis architecto sapiente, eius, praesentium, odio illo provident quos nostrum quaerat! Placeat saepe, blanditiis id assumenda ab autem in unde maxime alias, obcaecati distinctio expedita veritatis deserunt atque exercitationem quasi dolorum eum quas. Voluptas consequatur nisi sint porro quos? </h3> </div>Aquí vamos https://jsfiddle.net/byr0kqL5/
la función sencilla
function addNewDiv() { const box1 = document.getElementById("box1-content") //find element with id `box1-content` box1.classList.remove("display-none"); //make box 1 visible by `display-none` removal }pero necesitas agregar este estilo
.display-none { display: none; }Tu caja 1 será así
<div class="box1 display-none" id="box1-content"></div> Por último, su caja 2 debe tener un evento onclick
<div class="box2" onclick="addNewDiv()"></div>En primer lugar, agregue este atributo a Div2:
onclick="showDiv()"y agregue la identificación y la clase a Div1
id="div1" class="hide"JavaScript:
function showDiv() { div1=document.getElementById("div1"); div1.classList.remove("hide"); }CSS:
.hide{ display: none; }