Give all related radio button inputs a data-toggle-element of the selector that selects all the possible elements you wish to show/hide based on the value of the radio button.
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: 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. 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/.
#JQUERY TOGGLE VISIBILITY INSTALL#
Npm install jquery.toggle-visibility -save yarn 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 kommentar(er)
