Problem with accordion in tab

I have the following code:

<!DOCTYPE html>
<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 <title>LT
 </title> 
 <link type="text/css" href="css/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script> 
<script type="text/javascript">
 $(function(){
 $('#tabs').tabs();
 $('#tabs-SearchTab').tabs();
 $('#accordion').accordion();
 });
 </script> 
 </head> 
 <body> 
 <div id="tabs"> 
 <ul> 
 <li><a href="#tabs-Find">Find</a></li> 
 <li><a href="#tabs-Request">Request</a></li> 
 <li><a href="#tabs-HelpOut">Help out</a></li> 
 <li><a href="#tabs-Account">Account</a></li> 
 </ul> 
 <div id="tabs-Find"> 
 <div id="tabs-SearchTab"> 
 <ul> 
 <li><a href="#tabs-Search">Search</a></li> 
 <li><a href="#tabs-Results">Results</a></li> 
 </ul> 
 
 <div id="tabs-Search"> 
 <p>Search: <input value="Search string"></p> 
 </div> 
 <div id="tabs-Results">Ergebnisse...</div> 
 </div>
 </div> 
 <div id="tabs-Request">Hier können neue Anfragen gestellt werden
 </div> 
 <div id="tabs-HelpOut">Hier können Sätze übersetzt werden
 </div> 
 <div id="tabs-Account"> 
 <div id="accordion">
 <h3><a href="#">Account Informations</a></h3> 
 <div> 
 <p>Account Information</p> 
 </div>
 <h3><a href="#">Settings</a></h3> 
 <div> 
 <p>Settings</p> 
 </div> 
 </div> 
 </div> 
 </div>
 </body>

</html>

The titles of the accordion are displayed correctly, but the content doesn't appear. But in the following code (i just deleted the unnecessary code) it works:

<!DOCTYPE html>
<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 <title>LT
 </title> 
 <link type="text/css" href="css/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script> 
<script type="text/javascript">
 $(function(){
 $('#tabs').tabs();
 $('#accordion').accordion();
 });
 </script> 
 </head> 
 <body> 
 <div id="tabs"> 
 <ul> 
 <li><a href="#tabs-Account">Account</a></li> 
 </ul> 
 <div id="tabs-Account"> 
 <div id="accordion">
 <h3><a href="#">Account Informations</a></h3> 
 <div> 
 <p>Account Information</p> 
 </div>
 <h3><a href="#">Settings</a></h3> 
 <div> 
 <p>Settings</p> 
 </div> 
 </div> 
 </div> 
 </div>
 </body>
</html>

I don't understand that behaviour or why it works when i delete the other tabs. Can someone help me or give me a tip how to get the accordion working?

Thanks, dusti

Topic Participants
jesau

Problem with accordion in tab

Problem with accordion in tab

Topic Participants

jesau