"Return" content when closing toggle

Question

The goal is to hide the #boxar when the toggle is active and return the "#boxar" when "toggle is closed. The code works fine until I close the toggle (the "#boxar" disappears) but when I close the toggle, they won't return.

Anyone who knows how to fix this?

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

        return false;
    });
});

Answer 1

You need to use toggle() instead, like :

$(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>