Good evening, then I would like that when I click on a div (which in this case is an icon), another div is expandise, but that side of that div is the other, I wanted that second div in case behind the expansion. Thanks
Good evening, then I would like that when I click on a div (which in this case is an icon), another div is expandise, but that side of that div is the other, I wanted that second div in case behind the expansion. Thanks
Your question was a bit confusing, 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>
When you click Div from id="divDoIcone" the alternaEstado( id )
function will look for the div with the last id and toggle its state to inline-block or none appearing).
Now depending on how you want the div to be positioned, you will have to change some properties of the css (for this you can take a look at here ).
Snippet showing the above code working:
ps: The code organization is slightly different in the snippet, but its properties / operation are the same.
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>