Show and hide content in Javascript (Menu)

Question:

Good morning everyone, I have 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 ship 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 read

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

The content div appears.

Could you please help me, I'm not using any library, I intend to do everything without using it, because the project is small, so I just wanted a javascript to do this…

Since then, I thank you all.

Answer:

I just added the submenu id to the content div , 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>