Html, Css, javascript

Question

Good evening guys, so I’d like you to click on a div (which in this case is an icone), another div to expand, but on the other side of that div, I’d like that second div in the case to stay behind the one that will expand. Thank you

Answer 1

Your question got a little fuzzy, but I think I know what your main question is, come on:

<div id="divDoIcone" onclick="alternaEstadoDiv('idDaDivExpandivel')"  style="display: inline-block; background-color:black; height: 200px; width: 200px">  </div>
<div id="idDaDivExpandivel" style="display: none; background-color: red; height: 200px; width: 200px;" >  </div>

<script type="text/javascript">

    function alternaEstadoDiv(id){
        var div = document.getElementById(id);
        if( div.style.display == 'none'){
            div.style.display = "inline-block" // se quiser ter mais de um elemento ou div na mesma linha, se não troque inline-block por block
        }else{
            div.style.display = "none";
        }
    }
</script>


<div style="background-color:yellow; height: 200px; width: 200px"> outro div qualquer </div>

By clicking on Div id="divDoIcone" function alternaEstado( id ) will search for the div with the id passed and toggle its state to inline-block ( appearing) or to None( not appearing ).

Now depending on how you want div to position themselves, you’ll have to change some css properties ( for this you can take a look here ).

Snippet showing the above working code:

ps: the code organization is a little different in the snippet, but its properties / functioning are equal.

div{
  height: 200px; 
  width: 200px
 }
#divDoIcone {
  display: inline-block; 
  background-color:black; 
}
 
#divExpandivel {
  background-color:red; 
}

<div id="divDoIcone" onclick="alternaEstadoDiv('divExpandivel')" > <p style="position: absolute; color: white"> Div clicável </p> </div>
<div id="divExpandivel" style="display: none;" > <p style="position: absolute"> Div expansível </p>  </div>

<script type="text/javascript">

    function alternaEstadoDiv(id){
        var div = document.getElementById(id);
        if( div.style.display == 'none'){
            div.style.display = "inline-block" // se quiser ter mais de um elemento ou div na mesma linha, se não troque inline-block por block
        }else{
            div.style.display = "none";
        }
    }
</script>


<div style="background-color:yellow; "> outro div qualquer </div>