Create a expander/panelbar control with asp.net mvc and css and jquery only

Question

How can I create such a control: http://www.telerik.com/products/aspnet-mvc/panelbar.aspx

in asp.net mvc with pure css and jquery ?

The first what I tried was to make it static by using a

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

but a ul-tag can not have a text so how could I give my subelements a header with text?

Answer 1

There's the jQuery UI accordion control that you could get inspiration from. The markup looks like this:

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>