Show and hide content in Javascript (Menu)

Question

Good morning Guys, I’m having 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 ship class is the menu that will be visible.

The second so-called content is what will be hidden.

Come on,

I need that the moment I click on the read

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

The content divide appears.

They could help me please, I’m not using any library, I plan to do everything without using, because, the project is small, so I just wanted a javascript that does this..

From the thank to all.

Answer 1

I just added the submenu id to div content, I started with display:none and implemented Javascript. Using pure javascript would be 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>

Answer 2

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>

Answer 3

Using an event to click 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>