Multiple accordions in the same page ?

Multiple accordions in the same page ?

Hello everybody,

First excuse my poor english but I'm a french girl :)

I have succeed in using JQuery tabs + accordion in my page, it works perfectly.

However, I need to use several accordions in the same page, so when I try this, the second accordion doesn't work :

  1. <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>jQuery UI Example Page</title>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.10.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>
    <script type="text/javascript">
                $(function(){

                    // Accordion
                    $("#accordion").accordion({ header: "h3" });
       
                    // Tabs
                    $('#tabs').tabs();
                   
                    //hover states on the static widgets
                    $('#dialog_link, ul#icons li').hover(
                        function() { $(this).addClass('ui-state-hover'); },
                        function() { $(this).removeClass('ui-state-hover'); }
                    );
                   
                });
            </script>
    </head>
    <body>
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
      </ul>
      <div id="tabs-1">
        <h3>Tab 1</h3>
        <p>Lorem ipsum dolor sit amet, malesuada tempor. Dolor turpis sed felis. Aliquam a et quis metus, faucibus rhoncus, arcu vivamus aliquam cras urna. Interdum ut.</p>
        <div id="accordion">
          <div>
            <h3><a href="#">Section 1</a></h3>
            <div>Phasellus mattis tincidunt nibh.</div>
          </div>
          <div>
            <h3><a href="#">Section 2</a></h3>
            <div>Nam dui erat, auctor a, dignissim quis.</div>
          </div>
          <div>
            <h3><a href="#">Section 3</a></h3>
            <div>Nam dui erat, auctor a, dignissim quis.</div>
          </div>
          <div>
            <h3><a href="#">Section 4</a></h3>
            <div>Nam dui erat, auctor a, dignissim quis.</div>
          </div>
        </div>
        <!-- /accordion -->
        <p>Lorem ipsum dolor sit amet, malesuada tempor. Dolor turpis sed felis. Aliquam a et quis metus, faucibus rhoncus, arcu vivamus aliquam cras urna. Interdum ut.</p>
        <p>Lorem ipsum dolor sit amet, malesuada tempor. Dolor turpis sed felis. Aliquam a et quis metus, faucibus rhoncus, arcu vivamus aliquam cras urna. Interdum ut.</p>
        <div id="accordion">
          <div>
            <h3><a href="#">Section 5</a></h3>
            <div>Phasellus mattis tincidunt nibh.</div>
          </div>
          <div>
            <h3><a href="#">Section 6</a></h3>
            <div>Nam dui erat, auctor a, dignissim quis.</div>
          </div>
          <div>
            <h3><a href="#">Section 7</a></h3>
            <div>Nam dui erat, auctor a, dignissim quis.</div>
          </div>
        </div>
        <!-- /accordion -->
        <p>Lorem ipsum dolor sit amet, malesuada tempor. Dolor turpis sed felis. Aliquam a et quis metus, faucibus rhoncus, arcu vivamus aliquam cras urna. Interdum ut.</p>
        <p>Lorem ipsum dolor sit amet, malesuada tempor. Dolor turpis sed felis. Aliquam a et quis metus, faucibus rhoncus, arcu vivamus aliquam cras urna. Interdum ut.</p>
      </div>
      <!-- /tabs-1 -->
      <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
      <!-- /tabs-2 -->
      <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
      <!-- /tabs-3 -->
      <div id="tabs-4">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
      <!-- /tabs-4 -->
    </div>
    <!-- /tabs -->
    </body>
    </html>
























































































I imagine I need to create a 2nd function in the header or something like that ? But I don't have very much talent with javascript :)

Does anybody had the same problem ? Or a solution ?

I thank you in advance for your help ! :)