#6997 closed bug (worksforme)

Opened February 16, 2011 10:56AM UTC

Closed February 16, 2011 12:51PM UTC

Last modified February 28, 2011 02:04AM UTC

Sub accordion does not expand correctly

Reported by: Alexandre Martins Owned by: Alexandre Martins
Priority: minor Milestone: 1.9.0
Component: ui.accordion Version: 1.8.9
Keywords: Cc:
Blocked by: Blocking:
Description

Software versions used:

  • jquery 1.8.8 and 1.8.9
  • Iceweasel 3.6.13 and Opera 11.01
  • Linux baco 2.6.28-7.slh.1-sidux-amd64 #1 SMP PREEMPT Fri Feb 20 23:44:56 UTC 2009 x86_64 GNU/Linux

To reproduce copy the following code to a xhtml file and open it in a browser.

I simply expected the second sub-accordion's text to be completely visible and not hidden when clicking on it's title.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Conforming XHTML 1.0 Transitional Template</title>

    <link rel="stylesheet" href="/css/base.css" type="text/css" media="all" />
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/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.4.4/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/i18n/jquery-ui-i18n.js" type="text/javascript"></script>

    <script src="/js/demos.js" type="text/javascript"></script>
    <script src="/themeroller/themeswitchertool/" type="text/javascript"></script>


    <!-- Simple Tree Menu - Author: Dynamic Drive -->
    <script type="text/javascript" src="simpletreemenu.js">

/***********************************************
* Simple Tree Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

    </script>

    <link rel="stylesheet" type="text/css" href="simpletree.css" />
    <!-- Simple Tree Menu - Author: Dynamic Drive -->

    <!-- ixedit -->
    <script type="javascript" src="js/ixedit/ixedit.packed.js"></script>
    <link rel="stylesheet" type="text/css" href="js/ixedit/ixedit.css"></link>

    <style type="text/css">

      #jq-books{
        width:200px;
        float:right;
        margin-right:0
      }
      #jq-books li{
        line-height:1.25em;
        margin:1em 0 1.8em;
        clear:left
      }
      #home-content-wrapper #jq-books a.jq-bookImg{
        float:left;
        margin-right:10px;
        width:55px;
        height:70px}
      #jq-books h3{
        margin:0 0 .2em 0
      }
      #home-content-wrapper #jq-books h3 a{
        font-size:1em;
        color:black;}
      #home-content-wrapper #jq-books a.jq-buyNow{
        font-size:1em;
        color:white;
        display:block;
        background:url(http://static.jquery.com/files/rocker/images/btn_blueSheen.gif) 50% repeat-x;
        text-decoration:none;
        color:#fff;font-weight:bold;
        padding:.2em .8em;float:left;
        margin-top:.2em;
      }
    </style>


    <script type="text/javascript">
         //<![CDATA[
         jQuery(document).ready(function(){
             $('.accordion .head').click(function() {
                 $(this).next().toggle();
                 return false;
             }).next().hide();
         });
         //]]>
    </script>
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
      }
      #container {
        margin: 1%;
        padding: 0;
        width: 97%;
        background-color: #fc9;
      }
      #left{
        width: 26.5%;
      }
      #right{
        width: 66.5%;
      }
      #left, #right {
        float: left;
        margin: 1% 0 1% 1%;
        padding: 1%;
        background-color: #9cf;
        color: #000;
      }
      #right {
        float: right;
        margin: 1% 1% 1% 0;
      }
      .clear {
        height: 0;
        font-size: 1px;
        margin: 0;
        padding: 0;
        line-height: 0;
        clear: both;
      }
    </style>

  </head>
  <body>

    <div id="container">
        <div class="demo">

          <h1>Model browsing prototype</h1>


          <script type="text/javascript" >
              $(function() {
                  $( "#accordion1" ).accordion();
              });
          </script>

          <div id="accordion1">
            <h3><a href="#" >Compartments<button type="button">Add</button></a></h3>
            <div>
              <script type="text/javascript" >
                  $(function() {
                      $( "#accordion2" ).accordion();
                  });
              </script>

              <div id="accordion2">
                <h3><a href="#">Compartment 1<button type="button">Edit</button><button type="button">Add Species</button></a></h3>
                <div>
                  <p>
                    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
                  </p>
                </div>
                <h3><a href="#">Compartment 2<button type="button">Edit</button><button type="button">Add Species</button></a></h3>
                <div>
                  <p>
                    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
                    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
                    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
                    suscipit faucibus urna.
                  </p>
                </div>
                <h3><a href="#">Compartment 3<button type="button">Edit</button><button type="button">Add Species</button></a></h3>
                <div>
                  <p>
                    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
                    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
                    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
                    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
                  </p>
                  <ul>
                    <li>List item one</li>
                    <li>List item two</li>
                    <li>List item three</li>
                  </ul>
                </div>
              </div>
            </div>
            <h3><a href="#">Species<button type="button">Add</button></a></h3>
            <div>
              <script type="text/javascript" >
                  $(function() {
                      $( "#xxx4" ).accordion();
                  });
              </script>

              <div id="xxx4">
                <h3><a href="#">Compartment 1<button type="button">Edit</button><button type="button">Add Species</button></a></h3>
                <div>
                  <p>
                    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
                  </p>
                </div>
                <h3><a href="#">Compartment 2<button type="button">Edit</button><button type="button">Add Species</button></a></h3>
                <div>
                  <p>
                    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
                    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
                    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
                    suscipit faucibus urna.
                  </p>
                </div>
                <h3><a href="#">Compartment 3<button type="button">Edit</button><button type="button">Add Species</button></a></h3>
                <div>
                  <p>
                    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
                    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
                    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
                    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
                  </p>
                  <ul>
                    <li>List item one</li>
                    <li>List item two</li>
                    <li>List item three</li>
                  </ul>
                </div>
              </div>

            </div>
          </div>

        </div><!-- End demo -->

      <div class="clear"></div>
    </div><!-- container -->


    <div style="display: none;" class="demo-description">
      <p>
        Click headers to expand/collapse content that is broken into logical sections, much like tabs.
        Optionally, toggle sections open/closed on mouseover.
      </p>
      <p>
        The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
        usable without JavaScript.
      </p>
    </div><!-- End demo-description -->

  </body>
</html>
Attachments (0)
Change History (5)

Changed February 16, 2011 11:18AM UTC by rdworth comment:1

owner: → Alexandre Martins
status: new → pending

See the message in the red box above the entry form: "Please use jsFiddle or jsbin to provide test cases instead of pasting large blocks of code in the ticket."

Changed February 16, 2011 11:43AM UTC by Alexandre Martins comment:2

status: pending → new

My apologies.

Here's the jsbin link. http://jsbin.com/apema3

Changed February 16, 2011 12:51PM UTC by scottgonzalez comment:3

component: ui.core → ui.accordion
resolution: → worksforme
status: new → closed

Nested accordions work fine. You can't initialize a hidden accordion. See #3905.

Changed February 16, 2011 01:01PM UTC by rdworth comment:4

In other words, call

$( "#accordion2" ).accordion();
$( "#xxx4" ).accordion();
$( "#accordion1" ).accordion();

instead of

$( "#accordion1" ).accordion();
$( "#accordion2" ).accordion();
$( "#xxx4" ).accordion();

Changed February 28, 2011 02:04AM UTC by Alexandre Martins comment:5

Just dropped by to say thanks.