Switch from Section by clicking on menu

Question

I created a menu as follows:

<div class="wrapper">
<nav class="vertical">
    <ul class="men clearfix1">
        <li><a href="#Tarefas Diárias">Tarefas Diárias</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-men clearfix1">
                <li><a href="#1" class="btn-toggle" data-element="#minhaDiv">Gerais Quartos Ala A</a></li>
                <li><a href="#2" class="btn-toggle" data-element="#minhaDiv1">Gerais Quartos Ala B</a></li>
            </ul><!-- submenu -->
        </li>
    </ul>
	</nav>
</div>

And here I create the sections:

<section id="1">
<div class="wrapper" id="minhaDiv" style="display:none" >
<?php 

$result_cursos = "SELECT * FROM centrodb.RegistolimpALAA ORDER BY dataregisto DESC";
$resultado_cursos = mysqli_query($conn, $result_cursos);
...
?>  
</div>
</section>

<section id="2">
<div class="wrapper" id="minhaDiv1" style="display:none">
<?php 
$result_cursos1 = "SELECT * FROM centrodb.RegistolimpALAB ORDER BY dataregisto1 DESC";
$resultado_cursos1 = mysqli_query($conn, $result_cursos1);
...
?>  
</div>
</section>

And use this Javascript to show and hide:

<script type="text/javascript"> 
$(function() {
  $(".btn-toggle").click(function(e) {
    e.preventDefault();
    el = $(this).data('element');
    $(el).toggle();
  });
});
</script>

But I intended that by clicking on a submenu show the section and when you click on the second replace the section previous and not having the need to re-click on section previous to hide it.

Answer 1

Hide only those that are visible, except the one you are showing/hiding (toggle). To do this use the selector :not and :visible. The :not is to exclude from the selector the target div of the event and :visible to select the Ivs that are visible:

$(function() {
  $(".btn-toggle").click(function(e) {
    e.preventDefault();
    el = $(this).data('element');
    $("section > div:not("+el+"):visible").hide();
    $(el).toggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<nav class="vertical">
    <ul class="men clearfix1">
        <li><a href="#Tarefas Diárias">Tarefas Diárias</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-men clearfix1">
                <li><a href="#s1" class="btn-toggle" data-element="#minhaDiv">Gerais Quartos Ala A</a></li>
                <li><a href="#s2" class="btn-toggle" data-element="#minhaDiv1">Gerais Quartos Ala B</a></li>
            </ul><!-- submenu -->
        </li>
    </ul>
	</nav>
</div>

<section id="s1">
   <div class="wrapper" id="minhaDiv" style="display:none" >
      minhaDiv
   </div>
</section>

<section id="s2">
   <div class="wrapper" id="minhaDiv1" style="display:none">
      minhaDiv1
   </div>
</section>

Now, don’t use it id with only one number (id="1", id="2" etc..). IS recommended that a id start with a letter. That’s why I made a change to your id’s by adding a s (id="s1", id="s2").