Html, Css, javascript [closed]

Question

Html, Css, javascript [closed]

Navigation

#1 by (1 votes)

-4

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

html css

asked by anonymous 07.05.2018 / 00:27

1 answer

Send email with PHP [closed] How to change the site folder in Apache2?

score 1 · Answer 1

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>