Search and Top Navigation
#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 comment:1
owner: | → Alexandre Martins |
---|---|
status: | new → pending |
Changed February 16, 2011 11:43AM UTC by comment:2
status: | pending → new |
---|
My apologies.
Here's the jsbin link. http://jsbin.com/apema3
Changed February 16, 2011 12:51PM UTC by 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 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 comment:5
Just dropped by to say thanks.
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."