Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I want to create a webpart which is used to display question & answer just like any other FAQ. In this if we have 50 questions then just beside every question it has + icon , click on which is display respective answer just below it. How can we create , can anyone provide me with code.

share|improve this question

3 Answers 3

It is strongly recommended not to create any custom web parts for a such cases.

FAQ SharePoint List

Create SharePoint List for storing FAQ entries (for example, rename the Title column to Question, add column of type Multi-Line Text and name it Answer)

Display FAQ items

Probably the simplest way for displaying FAQ items would be to modify the default view to only show those 2 columns and set the style to Newsletter

enter image description here

Source

You could also customize List View and render FAQ items,for example in Accordion as demonstrated below
enter image description here

For more details please follow the article: Customize the rendering of a List View in SharePoint 2013: Displaying List Items in Accordion (or SharePoint 2010 version)

share|improve this answer

I have created this type of thing as a webpart using only client side coding and a content editor webpart. The issue with the OOB approach above (IMO) is the UI/UX (although, SP2013 is better and has the ability to customize views as pointed out above)

Your requirements above are easily achivable with pure javascript and HTML in a relatively small script. It's a little more work than the OOB solution proposed above, but not that much if have have the skills already. That script would:

1) retrieve the list items using the client side API (look at the SPServices library and forum discussions) 2) build the HTML for the Q&A into the UI you detail above (display question - plus sign expands it) 3) use jQuery to handle the UX of expanding the question (click) to reveal the answer.

Hope this helps in getting you to an implementation.

share|improve this answer

lol i dont know why its marked down as its a valid question, ok is this 2010 or 2007, im going with 2010.

create a new project that is of a visual webpart:

so you have your ascx (front end) and .cs that inherits the ascx. You also have a ascx.cs that is the backend for the ascx. An ascx is a user control to display controls to a page!

how are you getting the data? from a list?

im going with a list here and two columns:

Question | answer

so column one is the question and column 2 is the answer!

for simplicity my list is call FAQ;

within the ascx you want to display the values of each, you only need to do it once and use a repeater to repeat the controls for each row:

todo this, within the ascx add the repeater by going to tool on the left, under data drag and drop "Repeater" into the blank space which will now look like this:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %> 
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VisualWebPart1UserControl.ascx.cs" Inherits="VisualWebPartProject8.VisualWebPart1.VisualWebPart1UserControl" %>

<asp:Repeater ID="Repeater1" runat="server">

</asp:Repeater>

within the repeater add < which will show you some options: we need a template to repeat however many controls we may need:

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>

    </ItemTemplate>
</asp:Repeater>

next we need to build the list:

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
            <li>                     
                <div>
                    <p><strong>                             
                        <%# DataBinder.Eval(Container.DataItem, "Question") %>
                    </strong></p>
                </div>                     
                <div> 
                    <p>                            
                        <%# DataBinder.Eval(Container.DataItem, "answer") %>
                    </p>
                </div>                 
           </li> 
    </ItemTemplate>
</asp:Repeater>

now goto your ascx.cs, within the page load event add:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.Page.IsPostBack)
            BindData();
    }

now create the databind method:

    private void BindData()
    {
        SPList list = web.Lists["FAQ"];
        DataTable Dt = list.Items.GetDataTable();
        Repeater1.DataSource = Dt; Repeater1.DataBind();
    }

now when you run this code it should show all the list items (rows) each having its own header and body below it:

so now you want to ammend it so that the header has a + sign to min and max the answer! that is done using ajaxcontroltoolkit!

todo this you need to ammend the ascx:

first download ajaxcontroltoolkit for sharepoint 2010 (needs tobe for 2010)

add it to the reference list in you project, now add the reference within the ascx at the top. you can follow the rest here: the key is to now wrap your question within a head panel and the answer within a body panel

http://www.dotnetcurry.com/showarticle.aspx?ID=230

sorry cant show you, dont have much time on me hands! but iv got you most of the way! doing it through code is very similar and easy ;)

any questions please ask!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.