Toggle Buttons

Posted on

in

,

To make a button toggle the visibility of things when clicked use:

$(".toggleBtn").click(
    function(event) {
        event.preventDefault();
        $(this).toggleClass("current");
        var contentClass = $(this).attr("href").substring(1);
        if (contentClass == "") {
            $(this).next().slideToggle();
        } else {
            $("." + contentClass).slideToggle();
        }
    }
);

Then give a button the class of ‘toggleBtn’ and in it’s href attribute put in the class name of the thing you want to toggle starting with a hash eg. #div1.

View the demo

Download the demo

 

Leave a Reply

Your email address will not be published. Required fields are marked *

About me

Mark Wong is a front end developer with 10+ years experience. Most of his knowledge of HTML5, CSS and Js is self taught.

Calendar

May 2024
M T W T F S S
 12345
6789101112
13141516171819
20212223242526
2728293031