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 Ques, answers are stored in a database..I googled and found out there's this Javascript 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..thanks
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
You probably want a repeater to display the questions and answers (the answer in a div with visibility=hidden). You then need some javascript (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 because you want the visual effect to happen on the client side.
It's called an accordion.
http://jqueryui.com/demos/accordion/
jquery can do this :)
a repeater and jquery can be used together, depends on how your structure of FAQ is.
Hello ,
You can do with jquery.Suppose you have Faq.aspx page. 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.