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
When you click on the “Click Me” button
Thanks for reading.