ASP.NET beginner question: How do I implement something like this is my ASP.NET C# website?
Question
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.
4 answers
solution1
4 2010-09-06 08:15:48
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.
solution2
4 ACCPTED 2010-09-06 08:36:40
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.
solution3
1 2010-09-06 08:15:10
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
solution4
1 2010-09-06 08:15:34
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.