![]() ![]() The menu’s CSS and HTML is also given.Īlso, I used a link rather a button in this example to show / hide or toggle div element. The menu items are created inside a parent div element by using unordered list tag, ul. In this example, I have created a vertical menu with general menu items. The list of available easing values can be seen in the official website: An example of show/hide menu SHOWHIDE TYPE CODEAs animation is completed an alert will be shown which is placed inside the callback function. Following code is used in the jQuery part: The duration is set to 1500 ms, the easing value used: easeOutQuint (you must include jquery UI library for that to work) and finally a callback function. When you click on the “show/hide” circle button, the toggle jQuery method will be called with three options. In this example, I will use the jQuery library to use other easing option.Īs you can see, I have created a circle with some text (basically for jQuery show / hide div example). While if jQuery UI library is used, other easing options may also be specified. If you are using the jQuery library only, you may specify swing (which is default) or “linear” options. You may perform some action at the end of animation or show some descriptive message to your visitors. The callback function will execute as the animation is done. In the following example, I will use duration as well as the callback function. Whereas, the value provided as fast means 200 milliseconds and slow means 600 MS. The more the value of milliseconds the slower will be animation. “fast” or “slow” or provide time in milliseconds. In duration parameter, you can use strings e.g. When the duration is used in toggle method, this method becomes an animation method. The method uses are duration, ease and call back function in the toggle method. In the following example, different options available with toggle jQuery method are used. In this example, I simply used toggle method without using any parameters or options like duration, easing effect or a callback function that I will use in coming examples.Ī toggle example with ease and callback function options In the click event of the button, I placed jQuery toggle method which is attached to a div element with id: toggle_tst. As you click on the button “Show/Hide” if the div element was visible it will be hidden and vice versa. In this example, I will use toggle jQuery method to show or hide a div element. Click on the given links or demo images to see it online. Where, a selector can be div, paragraph, a class, ID, HTMl table, lists etc.įollowing are a few examples of using the jQuery toggle method with codes where I will use different parameters of toggle method as well. ![]() ![]() This is how you may use the toggle method: If only a single target is required, for example, only allowing to hide a visible element or showing a hidden element then you should use $.hide and $.show methods, respectively. in your web pages by giving a switchable option. Use toggle method if you need to allow users show or hide any elements like div, menu, paragraphs etc. Honestly I’m not sure in the previous versions because the sling:resourceType will be different (not the coral one).The toggle method of jQuery will hide specified visible element and display the hidden elements. Well, that’s all! This has been tested on AEM 6.5 but I’m pretty sure that can work on AEM 6.4 and 6.3. If you are curious about how this can work, there is a script here: /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js that uses CSS selectors to add or remove a hide class from elements. So, for example, showhidetargetvalue =”video” means that the container is displayed when the user chooses “video” in the dropdown. In this case I used respectively “video” and “image”. The value it depends on your dropdown values. Set the property showhidetargetvalue on both of them.Set the class=”hide carousel-showhide-target” on both of them, where “ carousel-showhide-target” is the selector we used.Create the containers for your fields, in our case and, and:.You can choose any value, it’s just a CSS selector to target the fields. Add the cq-dialog-dropdown-showhide-target property again to the list tag ( select list).Add the class=”cq-dialog-dropdown-showhide” to the list tag ( select list) to activate the show/hide functionality. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |