jQuery toggle() animation example

This example shows how to use jQuery toggle() function to show or hide a section inside a paragraph. So by clicking on a button the section will be displayed or hidden using the jQuery toggle() function.

First create the html

<html>
<head>
</head>
<body>
 <div class="containingbox">        
        <div class="floatright">
        Here is a new section that appears
        </div>
<p>
<h1>
Welcome to show/hide section in a paragraph
</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
 </div>
 <button id="clickMe">Click Me</button>
</body>
</html>

Then create jQuery stuff. Add required jQuery library to the <head/> section.

<script type="text/javascript">
$('#clickMe').click(function() {
    $('.floatright').toggle('slow');
});
</script>

Then create css style and put it under <head/> section

<style type="text/css">
.floatright
{
  width:180px;
  height:100px;
  padding:10px;
float: right;
margin: 0 0 10px 10px;
clear: right;
border-radius: 25px;
border: 1px solid black;
}

.containingbox p { margin-top: 0;}

#clickMe{
  background-color:red;
  width:100px;
  height:35px;
  border-radius: 7px;
  color:white;
}

</style>

Output

First time when you run the page

jQuery toggle

When you click on the “Click Me” button
jQuery toggle

Thanks for reading.

Soumitra Roy Sarkar

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials Twitter Facebook  Google Plus Linkedin Or Email Me

Leave a Reply

Your email address will not be published. Required fields are marked *