Multiple UIs not working on same page

Multiple UIs not working on same page

Hi All,
I am having a serious problem getting the accordion and the show/hide events to work together on the same page. Consider the following code:

$(document).ready(function()
  {
    $("#accordion").accordion();
  });

  $(document).ready(function()
  {
      $("#showContentHeader").click(function() {
          $("#showContent").show("normal");
      });

  });












The HTML code is as follows:

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

<div id="showContentHeader"><a href="javascript:;">Other Header</a></div>
<div id="showContent" style="display:none">
Testing 1,2,3
</div>











The accordion works fine with its appropriate jQuery files:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>



Now, If I remove $("#accordion").accordion(); the accordion obviously wouldn't work but the show function works. But I am not getting it to work in the same page.

Can someone help me please? Am I missing something?