Show and hide Javascript content (Menu)

Navigation
3

Good morning Guys, I have a big question.

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 one called content is what will be hidden.

Come on,

I need the moment I click on the li 

<li><a href="#"><i class="fa fa-home"></i></a></li>

The content div appears.

I would like to be able to help myself, I'm not using any library, I plan to do everything without using it, because the project is small, so I just wanted a javascript that would do that ..

Since I thank you all.

    
asked by anonymous 11.03.2016 / 13:00

3 answers

2

I just added the id submenu 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>
    
11.03.2016 / 13:19
0

Would that be? 

<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>
    
11.03.2016 / 15:25
-1

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>
    
11.03.2016 / 13:26
Compress / compress image after upload Copy record within the same table by changing some fields