coolio83000 coolio83000 - 4 months ago 18
HTML Question

same button for show/hide in jquery

Hello how to have the same button for show and hide in this jsfiddle example

`https://jsfiddle.net/kodjoe/ozf2vg6n/`


code bellow:



HTML

<button id="show">></button>
<button id="hide">Hide</button>
<div class="defaut"><a href="#">FR</a></div>
<div class="hide"><a href="#">EN</a></div>
<div class="hide"><a href="#">DE</a></div>


CSS

.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; }


JS

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

$( "#hide" ).click(function() {
$( ".hide" ).hide( 250 );
});

Answer

You can easily do it with the toggle fonction:

HTML

<button id="toogle">Toggle</button>


<div class="defaut"><a href="#">FR</a></div>
<div class="hide">  <a href="#">EN</a></div>
<div class="hide">  <a href="#">DE</a></div>

jQuery

$( "#toogle" ).click(function() {
$( ".hide" ).toggle('slow');
});

JSFiddle: https://jsfiddle.net/dy4msc8d/