Jquery Toggle Button image and Div Show/Hide


Tags: jquery,css,toggle,nav

Problem :

I'm trying to create a toggle button image that also show's and hides a div.

This is working: //html

    <body>
    <header>
        <script>
            $(document).ready(function () {
                $('a#button').click(function () {
                    $(this).toggleClass("down");
                    $("nav").show("slow");
                });
            });
            </script>
        <a id="button" title="button"></a>
        <nav style="display: none">
            <ul>
                <li>NAV</li>
            </ul>
        </nav>

    </header>
</body>

//css

    a {
    background-image: url(../images/menu_on.gif);
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: block;     
    }

a.down {
    background-image: url(../images/menu_off.gif);
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: block; 
    }

How do I get it to hide the "nav" again?



Solution :

use toggle()

$("nav").toggle("slow");

$(document).ready(function() {
  $('#button').click(function() {
    $(this).toggleClass("down");
    $("nav").toggle("slow");
  });
});
a {
  background-image: url(../images/menu_on.gif);
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: block;
}
a.down {
  background-image: url(../images/menu_off.gif);
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="button" title="button">a</a>
<nav style="display: none">
  <ul>
    <li>NAV</li>
  </ul>
</nav>


    CSS Howto..

    How can i auto rotate this carousel

    How to wrap an image in a div, and then center the div

    How to make a disabled select box look like a normal text box(css only)

    How to Drop 2 nested shadows On 2 Divisions in CSS? [closed]

    How to take an element over to given padding with CSS

    HTML/CSS: How to change image opacity when the text over it is Mouseovered?

    How to refer to children elements in CSS

    How can I disable the color defined in an previously defined CSS class

    How to mask semi circles inside a rectangle and mask through css?

    How to create spoiler text?

    How to right align a flipswitch in jquery mobile 1.4.5

    How to add CSS Hack specifically for IE10?

    how to use removeclass() function in Jquery to disable the CSS

    outlook.com how to target css at a specific class

    Can't figure out how to horizontally CENTER my content div [duplicate]

    How to make a border colorful using CSS?

    How to set icon of an page using CSS

    how to deselect the active span element?

    How to display code blocks with word wrap and line number with jekyll markdown on github-pages

    How to script CSS to achieve hide/appear effect based on hover

    how to draw a configurable pie chart in css

    How to align floated elements to the bottom of their container

    Third-Level Menu Items Are Always Showing

    How to center 2 or more divs on the same line? (css)

    How can I layout a sidebar or pullquote?

    how to align in centre using html css

    Need the background to change when the mouse goes over the selected tab. How?

    Html and CSS for emails, how to, where to?

    How to style every odd p element after h2 element occured in css?

    How do I do the css for this?