Contenu de "retour" lors de la fermeture de la bascule

Question

Le but est de cacher le #boxar lorsque le toggle est actif et renvoie le "#boxar" lorsque le "toggle" est fermé. Le code fonctionne bien jusqu'à ce que je ferme la bascule (le "#boxar" disparaît) mais lorsque je ferme la bascule, il ne revient pas.

Quelqu'un sait-il comment réparer cela ?

$(document).ready(function(){
    $('#toggle').click(function(){
        $('.boxar').hide();
        $('#'+this.rel+'').show();

        return false;
    });
});

Answer 1

Vous devez utiliser toggle() à la place, comme :

$(document).ready(function(){
    $('#toggle').click(function(){
        $('.boxar').toggle();
        $('#'+this.rel+'').toggle();

        return false;
    });
});

$(document).ready(function() {
  $('#toggle').click(function() {
    $('.boxar').toggle();
    $('#' + $(this).attr('rel')).toggle();

    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type='button' id='toggle' rel='test'>Toggle</button>
<br>
<div class='boxar'>Boxar DIV</div>

<span>Regular span</span><br>
<span id="test">Rel span</span><br>
<span>Regular span</span><br>
<span>Regular span</span>