jquery accordion with salesforce not working properly

Question

<apex:page >
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
  <style type='text/css'>
    .accordion{margin:50px}.accordion dd
.accordion dt{padding:10px;border:1px solid #000;border-bottom:0}.accordion dd:last-of-type
.accordion dt:last-of-type{border-bottom:1px solid #000}.accordion dd a
.accordion dt a{display:block;color:#000;font-weight:bold}.accordion dd{border-top:0;font-size:12px}.accordion dd:last-of-type{border-top:1px solid #fff;position:relative;top:-1px}a{text-decoration:none}body{font:16px Sans-Serif}

  </style>

<script type='text/javascript'>//<![CDATA[ 
  $(function(){
      (function($) {

         var allPanels = $('.accordion > dd').hide();

         $('.accordion > dt > a').click(function() {
              allPanels.slideUp();

         if($(this).parent().next().is(':hidden'))
         {
              $(this).parent().next().slideDown();
         }

         return false;
        });

     })(jQuery);
   });//]]>  

</script>
<p>This is a paragraph.</p>
<button>Toggle between hide() and show()</button>


<dl class="accordion">

<dt><a href="">Panel 1</a></dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>

<dt><a href="">Panel 2</a></dt>
<dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>

<dt><a href="">Panel 3</a></dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>

</dl>

</apex:page>

The above given code is working for me properly. However, when I tried to use it in given format it didn't worked can u pls suggest how can we make this work.

<apex:page sidebar="false" title="Article List" >
  <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#accordion-2" ).accordion({
               collapsible: true
            });
         });
      </script>
      <style>
         #accordion-2{font-size: 14px;}
      </style>

<style>
td{
vertical-align : top;
text-align: left;
}


        function hideshow(which){
        if (!document.getElementById)
        return
        if (which.style.display=="block")
        which.style.display="none"
        else
        which.style.display="block"
        }
</style>


<apex:form >

 <apex:panelGrid width="100%">
<table width="99%">
<tr>
<th width="33%">Title</th>
<th width="33%">Article Type</th>
<th width="33%">Summary</th>
</tr>
</table>
 <div id="accordion-2">
      <knowledge:articleList articleVar="article" hasMoreVar="false" pageSize="5">
         <h3> {!article.title} </h3>
      <div>
         <p>         
              <table width="99%">
              <tr>
                <td width="33%"> <apex:outputText > {!article.title} </apex:outputText> </td>
                <td width="33%"> <apex:outputText > {!article.articleTypeLabel} </apex:outputText> </td>
                <td width="33%"> <apex:outputText > {!article.summary} </apex:outputText> </td> 
              </tr>

              <tr>
                <td> 
                <p>
                  <c:articleComp articleId="{!article.articlenumber}" /> 
                </p>
                </td>
              </tr>
              </table>
         </p>
      </div>

      </knowledge:articleList>
</div>  
 </apex:panelGrid>
 <apex:commandButton value="Submit"/>

</apex:form>
</apex:page>