OK

CSSJockey websites use cookies to give you a better user experience on our websites. Visit our Privacy and Cookie policy to get more information about cookies, including how you could opt-out.

How-To: Create Easy Element Toggles with Data Attributes and jQuery.

While working on my latest WordPress plugin, I found myself using jQuery toggleClass on multiple elements and writ...

published: 2 years ago

While working on my latest WordPress plugin, I found myself using jQuery toggleClass on multiple elements and writing JS code for each was not at all a better solution. To fix this issue and keep the code clean and short I used the following code.

$(document).on('click', '[data-toggle="class"]', function () {
    var $target = $($(this).data('target'));
    var classes = $(this).data('classes');
    $target.toggleClass(classes);
    return false;
});

Make sure you have jQuery script in your page and add this code to your Javascript file and then you can use it in your HTML code as below:

<a href="#" data-toggle="class" data-target="#element" data-classes="is-active">Click here</a> to toggle.
<div id="element">...content goes here...</div>

The anchor tag with data-toggle will look for an element with ID or element and toggle is-active class for that element. You can apply this logic to any UI element such as Modal with an overlay background and use the data-toggle attributes on modal background as well to hide the modal.

Feel free to implement and extend this code on your projects.

 
 

pre-built solutions

Speed-up the launch of your web projects with our ready-to-use plugins, themes and widgets!

This block enables you to showcase your product or service reviews in an attractive and engaging layout. This block uses...
This Block helps you to showcase a left and right-aligned sidebars on any page of your website. The page content will be...