same button for show/hide in jquery


Tags: jquery,html,css,show-hide

Problem :

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


Solution :

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/


    CSS Howto..

    Responsive design: How to open links in a modal window for desktop browsers, but not on a mobile device?

    How to embed link HTML into CSS file for menus?

    How to include CSS for a specific part of the page

    How to link css to html in an express project?

    How to reach CSS zen?

    How to use “Wedding text ” in Css font family?

    How to create a drop down menu like the one in this picture

    css code how to change active navigation button color

    Vertical alignment in css of multiple elements (How to achieve this layout)

    How to freeze frame with css

    Trying to highlight table row using JQuery but not working, can anyone tell me why and how to fix it?

    responsive image gallery with different heights - how to achieve this with css (or jquery)

    How to force the horizontal scroll bar to appear?

    How to change the font-size of the part of textarea text in HTML,CSS?

    How to do a darker background image in css3 and stretch it?

    How to create DropDown MenuBar using CSS

    How do I draw a Diagonal div?

    How to make CSS compatible with all browsers?

    How do I get this dropdown to be on top of the other elements

    How to prevent default Css scroll onclick and allow javascript event only?

    How can I apply some css for all readonly elements on focus in IE8?

    how to swap div with one another in mobile view css

    How to specify multiple hover event targets in CSS?

    how to do jquery once fade out has finished?

    How to show a default SVG Fill Color on jQuery mouseout / mouseleave?

    How to create straight corners with CSS border-radius? [duplicate]

    How can I make the ul list the same size as the input element in terms of width?

    How to avoid background image tile when browser window resizes

    How should I organize the contents of my CSS file(s)?

    How to create new line with css or javascript?