How to make a div appear when hyperlink is clicked once and disappear when hyperlink is clicked a second time? Can this be repeated?


Tags: javascript,jquery,html,css,hyperlink

Problem :

I am looking for a way to have a div appear after the user clicks a hyperlink, and then have that same div disappear when the user clicks it again. Currently, the user is only able to have the div appear when the hyperlink is pressed, but when you click the hyperlink again, the div remains in it's "display: block;" state. Here is what I mean:

HTML

<a onclick="showDiv()" id="ShowAboutButton">What's This?</a>

<div id="About">

</div>

CSS

#ShowAboutButton {

    text-align: center;

    margin-top: 40px;

    background-color: white;

    border: none;

    cursor: pointer;

    font-family: "Lato Light";

    font-size: 22px;

}

#About {

    width: 900px;

    height: 600px;

    margin-left: auto;

    margin-right: auto;

    margin-top: 10px;

    background-color: gray;

    display: none;

    transition: height 2s;

}

Javascript

function showDiv() {

document.getElementById('About').style.display = "block";

}    

If it is at all possible, can someone please show me how to give the user the ability to click the hyperlink and have the div slide in with a transition effect, and then when the hyperlink is clicked again have it slide back out with a transition effect? Any help would be much appreciated! Thank you in advance!



Solution :

You can do this very easily with jquery slideToggle:

$("#ShowAboutButton").click(function(){

    $("#About").slideToggle();

});

JSFIDDLE


    CSS Howto..

    How to create square around glyphicon bootstrap?

    How to center div using JQuery or CSS

    HTML, CSS - image inside image, how to do that?

    How to apply CSS style when ID is taken?

    How to override content css property to not to use it on IE8?

    How to call a image class on a regular interval

    How to apply first-child:first-letter to only one section?

    Website elements go haywire when the user zooms in or out. How do I keep them from moving?

    Show text-decoration when hover over div

    CSS: How to use vmin unit in IE9?

    How to check if element contains specific class attribute

    How do I make everything on this page centered and fully responsive for all browsers?

    javafx ImageView how to use css hover

    How to make alerts overlap?

    How to get the text in the custom dialog to be centered vertically

    How to override the computed style in css?

    Capybara/CSS: How to find an input field by label AND value?

    Finding how many letter div fit

    How can i override the margin: 0; padding: 0; border: 0; css styles from main body css for ul li

    How to center jqPagination widget?

    How to fix header cannot sticky in wordpress?

    How do I solve this IE7 margin issue?

    ASP.NET Gridview - How do I change the color properties vertically?

    How to add text underneath the centered image

    How can I mark it up? [closed]

    How to clear css cache

    jquery - how to change the display css attribute of a button within a li on hover

    How to add percentage-of-height top/bottom margin in CSS

    how to give two different states in css?

    how to make the postion close X in css file in top instead of bottom