Display DIV’s on Click

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>

Answer

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>

Advertisement

Answer