Display DIV's on Click-CodePudding

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 >
  <img src="/images/Books/book_bg.jpg" alt="cover" id="cover1" />
  <h3 >
    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 >
  <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>

CodePudding user response：

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  id="box1-content"></div>

Lastly, your box 2 needs to have onclick event

<div  onclick="addNewDiv()"></div>

CodePudding user response：

Firstly add this attribute to Div2 :

onclick="showDiv()"

and add the id and class to Div1

id="div1"

JavaScript :

function showDiv() {
   div1=document.getElementById("div1");
   div1.classList.remove("hide");
}

CSS:

.hide{
   display: none;
}