Jquery toggle effect
Most of the websites allow users to display or hide some elements from the web page. Which makes the website user friendly. How it can be done.? It is a very simple technique. Jquery toggle function allows to display or hide the selected elements of the web page. You will learn about jquery toggle function today.
The html of the page will look like the following,
<html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <title>Jquery Toggle</title> <link rel="stylesheet" href="files/style.css"> </head> <body> <span><input type="button" value="click me to see toggle effect"></span> <ul id="twitter"> <li> <img src="files/tweet1.jpg" alt="tweet1"> <h2> Aenean aliquam </h2> <p> Aenean aliquam urna id augue viverra aliquet. Pellentesque habitant morbi tristique senectus et netus et. </p> </li> <li> <img src="files/tweet2.jpg" alt="tweet2"> <h2> Mauris viverr </h2> <p> Sed diam dolor, porttitor ac placerat in; tincidunt sollicitudin turpis? Mauris viverra sit amet auctor.</p> </li> <li> <img src="files/tweet3.jpg" alt="tweet3"> <h2> Ut accumsan</h2> <p> Sed consequat, nisl nec venenatis pretium; elit arcu placerat nisl, sit amet adipiscing rutrum non.</p> </li> </ul> </body> </html>
We have included a stylesheet for the web page. then we have created a button which is used to perform the toggle action. Then we have created some content for the toggle effect.
To perform the toggle effect we need to include the following script,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script> // Toggle effect for the click event $('span input').click(function() { $('ul li').toggle(1000, function() { //animate the toggle effect }); }); </script>
Here we have included the jquery package. and in the script we toggle the selected content, when we click the input button. see the demo for the output. and Thanks for spending your valuable time.
Posted in : Jquery
