Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#6997 closed bug (worksforme)

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>

Change History (5)

comment:1 Changed 8 years ago by rdworth

Owner: set to Alexandre Martins
Status: newpending

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."

comment:2 Changed 8 years ago by Alexandre Martins

Status: pendingnew

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

comment:3 Changed 8 years ago by Scott González

Component: ui.coreui.accordion
Resolution: worksforme
Status: newclosed

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

comment:4 Changed 8 years ago by rdworth

In other words, call

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

instead of

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

comment:5 Changed 8 years ago by Alexandre Martins

Just dropped by to say thanks.

Note: See TracTickets for help on using tickets.