jQuery手风琴在无序列表上

Question

I need to do something like the below where my UL is collapsible but because the UL is generated from the ASP:Menu control I don't get an ID for the UL so I need to add the accordion to the class somehow. Does anyone know how to assign a Jquery effect to a class?

<script type="text/javascript">
    $(function(){
        $('#accordion').accordion();
    })
</script>
<ul id="accordion">
  <li>
     <h3><a href="#">header</a></h3>
     <div>
         Content goes here
     </div>
  </li>
  <li>
     <h3><a href="#">header</a></h3>
     <div>
         Content goes here
     </div>
  </li>
</ul>

Generated code:

 <ul class="level1">
    <li><a class="level1 staticItem level1">
        <img src="/images/calculator.png" alt="" title="" class="icon" />Financial</a></li>
    <li><a class="level2 staticItem level2 selected" href="#" onclick="__doPostBack(&#39;Menu1&#39;,&#39;4\\6&#39;)">Address</a></li>
    <li><a class="level3 staticItem level3" href="/Controls/Financial/AddressBook.aspx" target="_blank">Address Book</a></li>
    <li><a class="level3 staticItem level3" href="/Controls/Financial/CustomerTypes.aspx" target="_blank">Customer Types</a></li>
    <li><a class="level1 staticItem level1">
        <img src="/images/container.png" alt="" title="" class="icon" />Container</a></li>
    <li><a class="level1 staticItem level1">
        <img src="/images/product.png" alt="" title="" class="icon" />Product</a></li>
</ul>

Answer 1

As I stated in the comment $('.className').accordion(); will do the trick.

here is an example:

HTML

<ul class="myclass">
  <li>
     <h3><a href="#">header</a></h3>
     <div>
         Content goes here
     </div>
  </li>
  <li>
     <h3><a href="#">header</a></h3>
     <div>
         Content goes here
     </div>
  </li>
</ul>

Javascript

   $(function(){
        $('.myclass').accordion();
    })

Here is an example Fiddle