Thursday, March 8, 2012

Show and hide paragraphs using JQuery

Below is the JQuery code I used to show and hide paragraphs when user clicks on the hyperlink - paragraph title:
<!DOCTYPE html>
<html lang="en">
 <meta charset="UTF-8" />
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript">
   //toggle the componenet with class msg_body  
   $('a.title').click(function()  {  
    var res =; 
   $('#p' + res).slideToggle(500);


   <a href="#" class="title" id="t1">Topic 1</a>
 <p id="p1">Testing 1

<a href="#" class="title" id="t2">Topic 2</a> <p id="p2">Testing 2

<a href="#" class="title" id="t3">Topic 3</a> <p id="p3">Testing 3 </p>
<a href="#" class="title" id="t4">Topic 4</a> <p id="p4">Testing 4

</body> </html>

No comments:

Post a Comment