Accordion Widget using jQuery UI

JavaScript
1

Recently, I began exploring this accordion widget. I was able to change the basic look of the widget through css. Id like to manipulate certain behaviors, but I have hit a wall. I want the accordion to:

  1. When the page loads, all sections are closed. Not open by default on the first/top section.

  2. Be able to open and close each section by clicking on the triangle icon assigned to that specific section.

As of right now, to open and close each section, you must click on a different section’s icon to collapse the current section you are in. Here is the link to the site:

I am very new to jQuery and have looked through the 1,000’s of lines of code. Any help, advice, or general direction steering would be greatly appreciated. Thank you in advance!

2 

  <script>
  $(function() {
    $( "#accordion" ).accordion({
        active: false,
        collapsible: true
    });
  });
  </script>

Reference:
http://api.jqueryui.com/accordion/#option-active

3

Thanks Mawburn! It works perfectly now.

4

Np.

I like jQuery UI mostly because of it’s documentation. Everything have very simple samples and the documentation is great. Be sure to check their “view source” button on their examples before trying to do things the hard way.