12/28/2023 0 Comments Jquery toggle visibility![]() You can also invert the checkbox behaviour (hide on checked) by setting the data-toggle-element-invert of the target elements to true, like so: Check me The checkbox is not checked! Simply give a checkbox input a data-toggle-element of the selector you wish to hide/show as that checkbox is checked/unchecked. If you are using Bootstrap, this utility class should already be present. $(function() ) Ĭurrently, the plugin hides elements by simply adding the “hidden” class to them, so you should have something like the following in your CSS: To activate the plugin, call it on all the relevant inputs as a jQuery plugin once the DOM is ready. This plugin uses declarative data-* attributes to determine what is to be shown or hidden, depending on the selection the user has made. Just download the source file here, and place a referece to it in your document’s head. The project doesn’t include a build step, as everyone has their own way of setting that up at the project level these days, minifying and whatnot. ![]() Note: In the cases of npm and yarn, the source file will be in node_modules/jquery.toggle-visibility/src/. Npm install jquery.toggle-visibility –save See usage examples by cloning the repository and opening test.html. ![]() However, this is really meant for simple interactions – anything too complex, and you might want to consider a real framework, such as Vue or React. Using nesting, you can make some pretty complex interactions possible without writing any code at all – you just need to add the proper data-* selectors. Using this plugin, I was able to remove a bunch of Javascript that performed simple show/hide operations based on form selections. The general philosophy here is that declarative is better than imperative. A jQuery plugin to declaratively toggle the visibility of elements based on form input selections.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |