Search jQuery

jQuery Forum

Accordion nested in Tab not showing up

in Using jQuery • 10 years ago

I'm attempting to place an accordion within a tab pane, and think there may be a conflict with the code I am using for the tabs as it is not appearing when inserted. The accordion works fine when in its own page. The script that appears in the page head is:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="script/jquery.tools.min.js"></script>
<script type="text/javascript" src="v3flashslideshow/slideshow.js"></script>
<script type="text/javascript">
function goToByScroll(id){
$('html,body').stop().animate({scrollTop: $("#"+id).offset().top},'slow');
}
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
</script>

The script at the end of the page is:

<script>
$(function() {
$(".tabs:first").tabs(".css-panes:first > div", { history: true });
});
$(function() {
$("#accordion").tabs(
"#accordion div.pane",
{tabs: 'h2', effect: 'slide', initialIndex: null}
);
});
</script>
</body>

Can anyone see where I might be going wrong? I'm a total newbie to jQuery, so please respond accordingly. The HTML all appears to be correct and can be viewed here.

Thank you!!!!

Replies(3)

jay.blanc..

Re: Accordion nested in Tab not showing up

10 years ago

Place the code for the accordion first so that the it is constructed before the tabs are built. That way the tabs know how much height to allow.

kovrin

Re: Re: Accordion nested in Tab not showing up

10 years ago

I have done and it has produced no change. Back to the drawing board!

the_cat

Re: Accordion nested in Tab not showing up

10 years ago

I think the problem is that you're missing the jQueryUI CSS. The Accordion effect will work pretty much as-is using the JS but the tabs need the CSS. I downloaded the ThemeRoller and edited the example to just the accordion and tabs, moving tabs into one of the accordion panels, and it works fine. Here's the code if it helps:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Accordion Tabs</title>
  <link type="text/css" href="css/custom-theme/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
  <script type="text/javascript">
   $(function(){
    // Accordion
    $("#accordion").accordion({ header: "h3" });
    // Tabs
    $('#tabs').tabs();
   });
  </script>
  <style type="text/css">
   body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
  </style>
</head>
<body>

<h2>Accordion</h2>
  <div id="accordion">
   <div>
    <h3><a href="#">First</a></h3>
    <div>Lorem ipsum dolor sit amet.</div>
   </div>
   <div>
    <h3><a href="#">Second (Tabs)</a></h3>
     <div id="tabs">
      <ul>
       <li><a href="#tabs-1">First</a></li>
       <li><a href="#tabs-2">Second</a></li>
       <li><a href="#tabs-3">Third</a></li>
      </ul>
      <div id="tabs-1">consectetur adipisicing elit, </div>
      <div id="tabs-2">, Ut enim ad minim veniam</div>
      <div id="tabs-3">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
     </div>
   </div>
   <div>
    <h3><a href="#">Third</a></h3>
    <div>Phasellus mattis tincidunt nibh.</div>
   </div>
  </div>
</body>
</html>

Top Reply

Response title

Attachments

jQuery Forum

Accordion nested in Tab not showing up

Replies(3)

Re: Accordion nested in Tab not showing up

Re: Re: Accordion nested in Tab not showing up

Re: Accordion nested in Tab not showing up

Statistics

Tags

Actions

Related Posts