How to make a div expand even though others are underneath

Question

How to make a div expand even though others are underneath

Navigation

#1 by (1 votes)

2

Well, I would like to make the div expand by clicking on it, and the other divs would decrease, vice versa with the others

*{
    margin: 0;
    padding: 0;
}
.divsCards{
    position: relative;
    width: 420px;
    height: 480px;
    left: 45px;
    top: 25px;
    background-color: blueviolet;
}
.card{
    position: relative;
    width: 420px;
    height: 96px;
}
.card1{
    background-color: #feca57;
}
.card2{
    background-color: #0abde3;
}
.card3{
    background-color: #10ac84;
}
.card4{
    background-color: #54a0ff;
}
.card5{
    background-color: #723eda;
}

<html>
    <head>
       <link rel="stylesheet" type="text/css" href="css/styleCardsRotinas.css">
        <title></title>
        
    </head>
    <body>
        <div class="divsCards">
            <div class="card card1"></div>
            <div class="card card2"></div>
            <div class="card card3"></div>
            <div class="card card4"></div>
            <div class="card card5"></div>
        </div>
    </body>
</html>

html css

asked by anonymous 12.05.2018 / 03:14

1 answer

Link to login form joomla 3.x MVC Encrypt / hide information according to user's role

score 1 · Answer 1

One of the most useful and cool tricks a web developer can learn is to use expandable DIVs, also known as collapsible DIVs.

This effect gives the user the ability to display on the page only the content that he wants to see at the moment. If they are interested in seeing the details of this content, they can click on a link or image and the page dynamically grows to show the content that was "hidden".

Let's practice!

<a href="javascript:;" onmousedown="toggleDiv('minha-div-1');">Toggle Div 1 Visibility</a>
  <div id="minha-div-1" style="display:none">
    <h3>This is a test!<br>Can you see me?</h3>
  </div><br />
    <a href="javascript:;" onmousedown="toggleDiv('minha-div-2');">Toggle Div 2 Visibility</a>
  <div id="minha-div-2" style="display:none">
     <h3>This is a test!<br>Can you see me?</h3>
 </div>

Now copy the following code into your script tag

<script language="javascript">
  function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
    }else{
     document.getElementById(divid).style.display = 'none';
   }
 }

Source: rhodesignblog

link