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 WordPress Plugin empowers the RSS Feeds for your WordPress website with a bundle of options. With this plugin, you ...
This WordPress Plugin allows you to display WordPress login, register, reset password and edit profile forms on your Wor...