As you click on show/hide link, the image will be disappeared if visible and shown if hidden. In the following example, an image tag is created with its ID. Remember that, when you specify duration parameter the jQuery toggle method becomes an animation method. Unlike above example where I used easing values other than swing and linear, you do not need to include jQuery UI library for swing and linear effect. As I did not specify the easing value, it will use default i.e. Upon clicking the show/hide Menu link, the div containing vertical menu will disappear with duration of three seconds. Click on the link below to see live demo and code: 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
#Function showhide code#
As 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.
#Function showhide free#
If not feel free to use it without any obligations.A toggle example with ease and callback function options I spent most of my free time creating, updating, maintaining and supporting these plugins, if you really love my plugins and could spare me a couple of bucks, I will really appreciate it.
You can style the content via CSS that is generated by the plugin. If you want to set the default visibility to display.Įxample: Press release content goes in here. You can have multiple showhide content within a post or a page, just by having a new type.Įxample: Links will go in here.
By default the content is hidden and user will have to click on the “Show Content” link to toggle it.
0 kommentar(er)
