I have 2 div elements, and I want to add something on the Div 2 that when I Click on that Div, it will Display Div 1, so both DIV's will be visible when clicking Div 2! Div 2 should remain visible all the time, but when I click on DIV 2, it should display Div 1!
I want a JS script!
.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>Here we go https://jsfiddle.net/byr0kqL5/
The simple function
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
}
but you need to add this style
.display-none {
display: none;
}
Your box 1 will be like this
<div class="box1 display-none" id="box1-content"></div>
Lastly, your box 2 needs to have onclick event
<div class="box2" onclick="addNewDiv()"></div>
Firstly add this attribute to Div2 :
onclick="showDiv()"
and add the id and class to Div1
id="div1"
class="hide"
JavaScript :
function showDiv() {
div1=document.getElementById("div1");
div1.classList.remove("hide");
}
CSS:
.hide{
display: none;
}