Reputation: 5098
I want to create an FAQ page like the one on this website
http://www.microsoft.com/windows/windows-7/faq.aspx
When you click on the question, the answer expands. Click it again and it collapses.
My question, answers are stored in a database. I googled and found out there's this JavaScript code to achieve this BUT also came across something that said it can be done using Repeater Controls.
How to do that? Any link to some tutorial would be great.
Upvotes: 2
Views: 671
Reputation: 33857
You probably want a repeater to display the questions and answers (the answer in a div
with visibility=hidden
). You then need some JavaScript code (probably worth looking at the jQuery library to make this easier) to hook the click event of the question to show the answer on the client side.
The repeater is used because you have a 'repeating' layout, it makes this a bit simpler. You need the JavaScript code because you want the visual effect to happen on the client side.
Upvotes: 1
Reputation: 5916
It's called an accordion.
http://jqueryui.com/demos/accordion/
jQuery can do this :)
A repeater and jQuery can be used together. It depends on the structure of the FAQ.
Upvotes: 4
Reputation: 14926
You can do it with jQuery. Suppose you have a page name Faq.aspx
.
So put this code into your .aspx page.
<head>
<script src="js/jquery_div.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function(){
$(this).next(".msg_body").slideToggle(600);
});
});
</script>
<style type="text/css">
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#F4F4F8;
color:Blue;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}
</style>
</head>
In the body tag you have to put this code.
<body>
<p class="msg_head">your titel</p>
<div class="msg_body">
Your logic
</div>
</body>
I really hope this will work for you.
Upvotes: 4
Reputation: 55479
Found few links for you. Hope these might help you -
http://articles.sitepoint.com/article/asp-net-repeater-control
http://www.eggheadcafe.com/community/aspnet/2/10040295/repeater-control.aspx
Upvotes: 1