FUNCTION SHOWHIDE CODE

Example usage: Press Release goes in here. Similar to what Engadget is doing for their press releases. You can see the table hides or appears at the duration of two seconds.By default the content is hidden and user will have to click on the “Show Content” link to toggle it. Look at example by clicking the link below: If the table is not visible, upon clicking the button, the table will be visible. When you click on the button, Show/Hide table, the table will hide if visible. In this example, an HTML table is created with a few CSS properties. I used 3000 milliseconds value which is three seconds.Ī CSS table example to hide and visible by toggle method If you do not use duration parameter, the image will appear and disappear in a flash. You simply need to call it by its ID or class name etc. You can see an animating image is just like another element that I used in above examples. 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. A toggle example with ease and callback function options

Function showhide