jquery ui accordions within tabs

Asked 9/10, 2009 at 6:43 Answered 28/10, 2013 at 14:24

I’ve run into a problem using accordions within tabs, the initially inactive accordions do not render their content correctly when their tab is selected. Reading around I see the reason for this is that the inactive tabs have display:none initially, so the height of the divs within the accordion do not get calculated correctly. None of the suggested solutions work for me. Have has anyone overcome this or have a work around?

Here's some example code of the problem:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.7.2.custom.css" media="screen" />
  <script type='text/javascript' src='../scripts/jquery-1.3.2.min.js'></script>
  <script type='text/javascript' src='../scripts/jquery-ui-1.7.2.custom.js'></script> 

  <script type="text/javascript">
  $(document).ready(function(){
    $('#tabs').tabs();
    $("#accordion1").accordion();
    $("#accordion2").accordion(); 
  });
  </script>
</head>
<body style="font-size:62.5%;">
   <div id="main" class="round roundB">

<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab 1</a> </li>      
    <li><a href="#tab2">Tab 2</a> </li>
  </ul>

<div id="tab1">
  <div id="accordion1">
 <h3><a href="#">Section 1</a></h3>
 <div>
  <p>
  TAB 1 Accordion 1
  </p>
 </div>
 <h3><a href="#">Section 2</a></h3>
 <div>
  <p>
  TAB 1 Accordion 2
  </p>
 </div>
  </div>
</div>

<div id="tab2">
  <div id="accordion2">
 <h3><a href="#">Section 1</a></h3>
 <div>
  <p>
  TAB 2 Accordion 1
  </p>
 </div>
 <h3><a href="#">Section 2</a></h3>
 <div>
  <p>
  TAB 2 Accordion 2
  </p>
 </div>
  </div>
</div>
</div>

</div>
</body>
</html>

Cohobate answered 9/10, 2009 at 6:43 Comment(0)

I had the same problem before. The solution is: You must active accordion before tabs.

$("#accordion").accordion();
$("#tabs").tabs();

Maybe you need left align.

.ui-accordion-header{
  text-align: left;
}

good luck

Hornstein answered 9/10, 2009 at 6:43 Comment(4)

Thanks, much simpler than the solution I came up with! – Cohobate 30/10, 2009 at 7:48

Thank you very much!!! I was having so much trouble trying to work this issue around that I didn't realized the solution could be this easy. Thanks again. – Foppery 5/12, 2010 at 19:25

Worked like a charm. Excellent solution. – Thrombokinase 24/2, 2012 at 16:35

Gd bless you! LOL. This saved me so much time. – Isolate 24/1, 2019 at 1:45

After reading the stated problem, it was my impression that a problem I have run into was of a similar nature. Using the accordion functionality within a tab was forcing my accordion content to contain a scrollbar, a feature I did not want.

For some reason or another, the current solution provided did not work for me.

The solution I found was to overwrite the default accordion setting of autoHeight (default of true, overwrite to false)

$("#accordion").accordion({
    autoHeight: false
});
$('#tabs').tabs();

Cakewalk answered 1/9, 2010 at 21:8 Comment(3)

Thank you so much. I've been tearing my hair out all day trying to solve this. The "accepted answer" above did not help - but this fixed it! – Whiff 28/11, 2011 at 16:36

+1, if a small scrollbar appears this solution is for you. thanks – Silsbye 5/5, 2012 at 16:52

Still preventing hair loss in 2018!! – Emerick 8/9, 2018 at 9:33

Initialize accordion when you activate tab:

sample:

$('.selector').bind('tabsadd', function(event, ui) {
  ...
});

your sample:

  <script type="text/javascript">
    $(document).ready(function(){
        $('#tabs').tabs();
    $('#tabs').bind('tabshow', function(event, ui) {
        $("#accordion1").accordion();
        $("#accordion2").accordion(); 
    });

  });
  </script>

Maybe that you will need to initialize every accordion special for each tab.

Or use latest UI lib:

    <link rel="stylesheet" href="http://static.jquery.com/ui/css/base2.css" type="text/css" media="all" />
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
        <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
        <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/bgiframe/jquery.bgiframe.min.js" type="text/javascript"></script>
        <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>

Pomp answered 9/10, 2009 at 8:14 Comment(0)

    $( "#tabs" ).tabs({
        load: function(event, ui) {
            $("#"+ui.panel.id+" .accordians:first").accordion();
        }
    });

This worked when using ajax html with tabs.

Metaphor answered 22/7, 2011 at 21:20 Comment(0)

None of the above worked for me. For me, the trick was to change from using unique div IDs for each accordion to a single class identification for all accordions. That is, change: <div id="accordion1>, <div id="accordion2>,etc... to<div class="accordion"> within each of the tabs.

You may also need to add to your $(document).ready function

$(".accordion").accordion({
      autoHeight: false
  });

  $('#tabs').tabs();
  $('#tabs').bind('tabshow', function(event, ui) {
      $(".accordion").accordion("resize");
      });

So the format would be:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.7.2.custom.css" media="screen" />
  <script type='text/javascript' src='../scripts/jquery-1.3.2.min.js'></script>
  <script type='text/javascript' src='../scripts/jquery-ui-1.7.2.custom.js'></script> 

  <script type="text/javascript">
  $(document).ready(function()
  {
      $(".accordion").accordion({
            autoHeight: false
      });

      $('#tabs').tabs();
      $('#tabs').bind('tabshow', function(event, ui) {
          $(".accordion").accordion("resize");
      });
  });
  </script>
</head>
<body style="font-size:62.5%;">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">User</a></li>
        <li><a href="#tabs-2">Folders</a></li>
        <li><a href="#tabs-3">Decks</a></li>
    </ul>
    <div id="tabs-1">
        <div class='accordion'>
            <h3>Header 1</h3>
            <div</div>  
            <h3>Header 2</h3>
            <div></div> 
            <h3>Header 3</h3>
            <div><</div> 
        </div>
    </div>
    <div id="tabs-2">
        <div class='accordion'>
            <h3>Header 4</h3>
            <div</div>  
            <h3>Header 5</h3>
            <div></div> 
            <h3>Header 6</h3>
            <div><</div> 
        </div>
   </div>
   <div id="tabs-3">
        <div class='accordion'>
            <h3>Header 7</h3>
            <div</div>  
            <h3>Header 8</h3>
            <div></div> 
            <h3>Header 9</h3>
            <div><</div> 
        </div>  
   </div>
</div>

</body>
</html>

Petigny answered 28/10, 2013 at 14:24 Comment(0)

See

http://bugs.jqueryui.com/ticket/5601

.ui-helper-clearfix { display:block; min-width: 0; overflow: hidden; }

Photophilous answered 15/3, 2012 at 17:34 Comment(0)

-1

just read carefully http://docs.jquery.com/UI/Tabs# there is an answer. it's simpliest way

Quadrivial answered 13/10, 2009 at 6:5 Comment(0)

Recommended topics

Hot tags