<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('p').hide();
//toggle the componenet with class msg_body
$('a.title').click(function() {
var res = this.id.substr(1);
$('#p' + res).slideToggle(500);
});
});
</script>
</head>
<body>
<a href="#" class="title" id="t1">Topic 1</a>
<p id="p1">Testing 1
</p>
<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>
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:
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment