The creation of non standard presentations for Lists/Libraries is a fairly common scenario and using the XSLT List View Web Part (XLV) possibilities that can be achieved pretty easily.
Let’s take a look how to render list of question and answers using Accordion Menu in SharePoint. Actually the idea for this post appeared after posting of corresponding question on StackOverflow.
So, let’s discuss how it could be accomplished using XLV. For Accordion we will utilize jQuery UI library.
FAQ Custom List
First of all, let us define where the questions and answers (FAQ) we’ll be stored. For this we will use Custom List with Content Type.
Custom View for arranging items using jQuery UI Accordion
After creating Custom List we add new View for displaying Accordion for FAQ items
XSLT style sheet for rendering Accordion View
XSLT style sheet for FAQ List is intended for the following purposes:
- loading jQuery Core and UI Libraries
- rendering list items using layout as specified for Accordion menu
- initializing and rendering Accordion for List items
Using jQuery UI Accordion
FAQ List Accordion View rendered in XLV is shown below on picture
- Source code for project on GitHub
- XsltListViewWebPart and Custom List Views on MSDN
- How to: Customize the Rendering of a Field on a List View on MSDN
- Accordion Menu in User Interface Design Patterns
- jQuery UI Library