How to make a div expand even if there are others below

Asked

Viewed 1,082 times

2

Good people, I would like to make the div expand by clicking on it, and the other Divs 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

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 possibility to expose on the page only the content he wants to see at that time. If they are interested in seeing the details of this content, they can click on a link or image and the page grows dynamically to show the content that was there "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

https://rhodesignblog.wordpress.com/2008/12/15/como-criar-uma-div-expansivel-simples-com-javascript-e-css/

  • I understood what you did, but how would it look with css?

  • You can assign your classes to the above example.

  • Thank you man, although I did not use your code because I managed to do otherwise, but msm so thank you tmj :D

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.