FAQ are answers of common question in your website , it’s very helpful for the user who want to understand clearly about the website.
In this post I will show you how to implement it using Linq2Xml and then using jquery for face-in and face-out effect.
Take a look at Faq xml data , and I put it in the App_Date folder
<?xml version="1.0" encoding="utf-8" ?>
<faqs>
<faq id="1" question="1.Lorem ipsum dolor sit amet, consectetur adipiscing elit tortor in imperdiet placerat?" answer="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae dolor in quam vestibulum consequat a in lacus. Nulla cursus, tortor in imperdiet placerat, massa lacus sagittis urna, quis tincidunt elit mauris porttitor lorem. Nulla gravida lacinia ornare. Duis nec lorem lacus, a feugiat lacus">
</faq>
<faq id="2" question="2.Lorem ipsum dolor sit amet, consectetur adipiscing elit." answer="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae dolor in quam vestibulum consequat a in lacus. Nulla cursus, tortor in imperdiet placerat, massa lacus sagittis urna, quis tincidunt elit mauris porttitor lorem. Nulla gravida lacinia ornare. Duis nec lorem lacus, a feugiat lacus">
</faq>
<faq id="3" question="3.Lorem ipsum dolor sit amet, consectetur adipiscing elit in quam vestibulum consequat a in lacus?" answer="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae dolor in quam vestibulum consequat a in lacus. Nulla cursus, tortor in imperdiet placerat, massa lacus sagittis urna, quis tincidunt elit mauris porttitor lorem. Nulla gravida lacinia ornare. Duis nec lorem lacus, a feugiat lacus">
</faq>
<faq id="4" question="4.Lorem ipsum dolor sit amet, consectetur adipiscing elit." answer="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae dolor in quam vestibulum consequat a in lacus. Nulla cursus, tortor in imperdiet placerat, massa lacus sagittis urna, quis tincidunt elit mauris porttitor lorem. Nulla gravida lacinia ornare. Duis nec lorem lacus, a feugiat lacus">
</faq>
</faqs>
Create a new ASP.NET website and write the code in the Page Load event like bellow:
using System;
using System.Collections.Generic;
using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
public IEnumerable<XElement> faqsElement;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
XElement element = XElement.Load(Server.MapPath("~/App_Data/Faq.xml"));
faqsElement = element.Elements("faq");
}
}
}
When the default page has loaded, it will return a list of faq element, and I will get faq data in the aspx code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Building faq page using Linq2Xml and Jquery</title>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<style type="text/css">
.divAnswer
{
display: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h1>
FAQ</h1>
<div class="faqs">
<% foreach (var item in faqsElement)
{ %>
<div class="faq">
<a href="#" class="question">
<%= item.Attribute("question").Value %></a><br />
<div class=" divAnswer">
<%= item.Attribute("answer").Value%>
</div>
</div>
<% } %>
</div>
</form>
</body>
<script type="text/javascript">
$(document).ready(function () {
$("a.question").click(function () {
$(this).parent().find("div.divAnswer").slideToggle();
})
});
</script>
</html>
Answer section only show when user clicks on the hyperlink question, so the divAnswer css class hides it for this purpose.
Run this page you will the result as above
faq-linq2xml-and-jquery.rar (19.41 kb)
Subscribe