same button for show/hide in jquery
<p>How to have the same button for show and hide in this jsfiddle example </p>

<p><a href="https://jsfiddle.net/kodjoe/ozf2vg6n/" rel="nofollow">https://jsfiddle.net/kodjoe/ozf2vg6n/</a></p>

<h2>code bellow:</h2>

<p>HTML</p>

<pre><code>&lt;button id="show"&gt;&gt;&lt;/button&gt;
&lt;button id="hide"&gt;Hide&lt;/button&gt;
&lt;div class="defaut"&gt;&lt;a href="#"&gt;FR&lt;/a&gt;&lt;/div&gt;
&lt;div class="hide"&gt;&lt;a href="#"&gt;EN&lt;/a&gt;&lt;/div&gt;
&lt;div class="hide"&gt;&lt;a href="#"&gt;DE&lt;/a&gt;&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.show, .hide {float: left; display: inline-block;}    
.defaut, .hide {margin: 0px; padding: 0px; width: 40px; float: left; text-align: center; }    
.langue {  width: 60px; }    
.defaut {display: inline-block; }    
.hide {display: none; }
</code></pre>

<p>JS</p>

<pre><code>$( "#show" ).click(function() {
  $( "div" ).first().show( "fast", function showNext() {
    $( this ).next( "div" ).show( "fast", showNext );
    $("div").show(250);
  });
});

$( "#hide" ).click(function() {
  $( ".hide" ).hide( 250 );
});
</code></pre>