Use Accordion Menu as FAQ Template

The accordion widget is not limited to be a navigation bar. It can also be used to display collapsible content blocks. This really gives a clean look to your page, as shown in the typical FAQ template below.

This tutorial also shows how the accordion built-in function, expand(id), close(), can be used in bookmark links to show/hide the accordion content.

Demo & Source Code

The demo 5 that you can download from Accordion Menu

Accordion FAQ Template

Group A
- Q: Lorem ipsum dolor sit amet, consectetur adipiscing elit?
  
  Answer: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque vulputate sagittis. Curabitur in lorem interdum, pharetra elit nec, laoreet ipsum. Aenean id vestibulum mauris, eget rhoncus dui.
- Q: Quisque tristique nisl aliquet eget et dui?
  
  Answer: Vestibulum pharetra rhoncus risus, et vehicula arcu luctus quis. Sed rutrum, quam eu dapibus dignissim, leo massa convallis velit, a viverra leo est eu tellus. Suspendisse potenti. Duis a neque nec velit placerat pulvinar sit amet sit amet sem.
- Q: Donec eu mi fringilla, placerat nunc vel, feugiat purus?
  
  Answer: Nullam tempus consequat diam aliquet tempor. Quisque mattis iaculis luctus. Ut quis felis venenatis, tristique eros fermentum, gravida eros. Maecenas euismod vitae dui at eleifend. Phasellus eget suscipit ex. Vivamus quis sodales sapien. Suspendisse laoreet lobortis elit egestas pulvinar. Nunc faucibus est nec mattis iaculis. Mauris et convallis dolor, scelerisque sodales risus.
Q: Proin rutrum sapien vitae tellus consectetur mattis non quis leo?

Answer: Sed fringilla, lacus eu elementum ultricies, orci sem vestibulum mi, at hendrerit turpis ligula quis tortor. Aliquam molestie est quis quam fringilla, quis tincidunt velit dictum. Donec vulputate, sapien vel semper placerat, lectus libero sollicitudin metus, quis sagittis nisi enim ac nisi. In scelerisque urna pulvinar justo pellentesque dapibus.
Q: Duis interdum nisi at ligula?

Answer: In finibus euismod libero, in pharetra felis fringilla eu. Suspendisse gravida, purus eget lacinia tempus, metus ipsum scelerisque justo, ut egestas sapien lacus sed mauris. Nunc mi risus, luctus sit amet feugiat at, posuere id orci. Maecenas nibh lectus, tempus vitae euismod dictum, luctus nec mauris.
Q: Morbi vitae nibh sit amet mi suscipit porta?

Answer: Aenean sagittis rutrum sapien, vitae dignissim augue ultrices ut. Suspendisse laoreet mattis mollis. Donec malesuada enim ac nibh condimentum ornare. Praesent hendrerit convallis finibus.

If you check the source code of this demo, you will find the markup is semantic and simple:

<div id="accordion">
    <ul>
        <li>
            <div>Group A</div>
            <ul>
                <li id="a1">
                    <div>...Q...</div>
                    <p>...A...</p>
                </li>
                <li>
                    <div>...Q...</div>
                    <p>...A...</p>
                </li>
            </ul>
        </li>
        <li id="a2">
            <div>...Q...</div>
            <p>...A...</p>
        </li>
        <li id="a3">
            <div>...Q...</div>
            <p>...A...</p>
        </li>
        <li>
            <div>...Q...</div>
            <p>...A...</p>
        </li>
    </ul>
</div>

Using bookmark link to navigate FAQ content

Read answer a1

Read answer a2

Read answer a3

Close expanded items

Clicking above bookmarks will open or close the accordion content. They are using the accordion's built-in function, expand(id), or close(), to show/hide content.

<a href="#a1" onclick="amenu.expand('a1')">answer a1</a>
<a href="#" onclick="amenu.close()">Close expanded items</a>