Accordion style list

Accordion style list

I've been searching all around, but I'm not sure what this type of list is called, so if someone can point me in the right direction, I'd really appreciate it.

I'm trying to create an accordion style list, but I need to have multiple elements open at the same time. So I've written the code, and it works fine, but I want to add a right facing triangle at the start of the header, and when clicked, I want it to change to a down facing triangle and show the content.

I'm trying to change the class of the span to show a down arrow, but it doesn't seem to work.

Any help would be greatly appreciated!
Brian


Here's my code:
         jQuery(document).ready(function(){
            $('.accord_head').click(function() {
               $(this).next().toggle('fast');
               $(this.span).removeClass('ui-icon-triangle-1-e');
               $(this.span).addClass('ui-icon-triangle-1-s');
               return false;
            }).next().hide();
         });



      <div id="custom_acc">
         <h3 class="accord_head""><span class="ui-icon ui-icon-triangle-1-e"></span>First</h3>
         <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
         <h3 class="accord_head"><span class="ui-icon ui-icon-triangle-1-e"></span>Second</h3>
         <div>Phasellus mattis tincidunt nibh.</div>
         <h3 class="accord_head"><span class="ui-icon ui-icon-triangle-1-e"></span>Third</h3>
         <div>Nam dui erat, auctor a, dignissim quis.</div>
      </div>