Show and hide content in Javascript (Menu)
Good Morning guys, I'm in a big doubt.
I have the following code:
<div class="nav">
<ul class="menu">
<li class="mnativo"><a href="#"><i class="fa fa-bars"></i></a></li>
<li><a href="#"><i class="fa fa-home"></i></a></li>
<li><a href="#"><i class="fa fa-star-o"></i></a></li>
<li><a href="#"><i class="fa fa-play"></i></a></li>
</ul>
</div>
<div class="conteudo">
<nav>
<ul class="submenu">
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
</ul>
</nav>
</div>
The first Div with the nave class is the menu that will be visible.
The second called content is what will be hidden.
Come on,
I need that the moment I click on the li
<li><a href="#"><i class="fa fa-home"></i></a></li>
The content div appears.
Could help me out of kindness, I'm not using any library, I intend to do everything without using, yeah, the project is small, so I just wanted javascript to do that..
Since then I thank you all.
3
3 answers
I just added the submenu id to div
content, started with display:none
and implemented JavaScript.
Using pure javascript would look like this:
function acao(){
var submenu = document.getElementById('submenu');
if(submenu.style.display == 'block'){
submenu.style.display = 'none';
}else{
submenu.style.display = 'block';
}
}
<div class="nav">
<ul class="menu">
<li class="mnativo"><a href="#">teste<i class="fa fa-bars"></i></a></li>
<li><a href="#" onclick="acao()"><i class="fa fa-home">clique aqui</i></a></li>
<li><a href="#"><i class="fa fa-star-o">teste</i></a></li>
<li><a href="#"><i class="fa fa-play">teste</i></a></li>
</ul>
</div>
<div class="conteudo" id="submenu" style="display:none;">
<nav>
<ul class="submenu">
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
</ul>
</nav>
</div>
2
Author: Carlinhos, 2016-03-11 12:19:49
Would that be it?
<script>
function menu(id)
{
for(i=1;i<=4;i++)
{
var div = document.getElementById("conteudo"+i);
if(i == id)
{
div.style.display = "block"
}
else
{
div.style.display = "none"
}
}
}
</script>
<div class="nav">
<ul class="menu">
<li class="mnativo"><a href="#" onclick="menu('1')"><i class="fa fa-bars">menu 1</i></a></li>
<li><a href="#" onclick="menu('2')"><i class="fa fa-home">menu 2</i></a></li>
<li><a href="#" onclick="menu('3')"><i class="fa fa-star-o">menu 3</i></a></li>
<li><a href="#" onclick="menu('4')"><i class="fa fa-play">menu 4</i></a></li>
</ul>
</div>
<div id="conteudo1" style="display:none;">
<nav>
<ul class="submenu">
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
</ul>
</nav>
</div>
<div id="conteudo2" style="display:none;">
<nav>
<ul class="submenu">
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
</ul>
</nav>
</div>
<div id="conteudo3" style="display:none;">
<nav>
<ul class="submenu">
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
</ul>
</nav>
</div>
<div id="conteudo4" style="display:none;">
<nav>
<ul class="submenu">
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
</ul>
</nav>
</div>
0
Author: Motonio, 2016-03-11 14:25:56
Using a click event on the element and changing the style.display between none and block you can do what you want.
<div class="nav">
<ul class="menu">
<li class="mnativo"><a href="#"><i class="fa fa-bars"></i></a></li>
<li><a href="#"><i class="fa fa-home"></i></a></li>
<li><a href="#"><i class="fa fa-star-o"></i></a></li>
<li><a href="#"><i class="fa fa-play"></i></a></li>
</ul>
</div>
<div id="conteudo" class="conteudo" >
<nav>
<ul class="submenu">
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
<li><a href="#">Todas</a></li>
</ul>
</nav>
</div>
<li><a id="click" href="#">Click<i class="fa fa-home"></i></a></li>
<script text="javascript">
(function(){
var click = document.getElementById("click");
click.addEventListener("click", function(){
var conteudo = document.getElementById("conteudo");
if( conteudo.style.display === "none")
conteudo.style.display = "block";
else{
conteudo.style.display = "none";
}
})
})();
</script>
-1
Author: Vinicius Zaramella, 2016-03-11 12:26:22