I have two accordion.
Accordion 1 : Router Info(contains
gridRouter)
Accordion 2 : UNC Info(contains
gridUNC)
If the gridRouter contains 2 records and gridUNC contains 30 records, the accordion 1 takes space for 30 records (not for 2 records)
As of jQuery UI 1.10 the 'autoHeight' attribute has been deprecated. To achieve the same effect in the new version use heightStyle: "content"
See an example:
http://jqueryui.com/accordion/#no-auto-height
you should use
$("#accordion").accordion({
heightStyle: "content"
});
It will set height according to your content. and will not use blank space as height.
Try setting the autoHeight property to false. See http://jqueryui.com/demos/accordion/#options.
Related
I am trying to take the ui-datepicker-header and convert it to an accordion. It actually works (sort of). I want to hide notes here for the user to reveal if they choose.
I need the accordion to be collapsed when the page opens. What I have always open expanded despite using these parameters:
$('.ui-datepicker-header').accordion({
active: false,
collapsible: true,
autoHeight: false,
event: "click"
});
Once the page renders I see the arrow image is correct but I need click the header twice to get it to close. After this it works as expected.
Here's a fiddle demo: http://jsfiddle.net/mv5492/PuWWS/17/
Since these are both ui components I figured this would work fine.
Thanks in advance!
Mike
Move the $('.ui-datepicker-header').accordion(... declaration below the $('.ui-datepicker-header').append() statement that appends the text to the header.
This means that the aria- tags will be applied to the text under .ui-datepicker-header, and the text will be set to display: none when the page loads.
I want to utilize jQuery ui's icon sheet on one of my input boxes that I'm applying datepicker on. I tried simply putting the classes on the input element itself but it would show the whole row of the sheet.
This is how figured to do it. Since some of the inputs were in a table, I used css and a negative margin-bottom to nullify the extra vertical space caused by the span.
$(document).ready(function (){
$('.date').datepicker()
.each(function(index,element){
$('<span>').addClass('ui-icon ui-icon-calendar').insertAfter(element).position({
of: element
,my: 'right top'
,at: 'right top+2'
});
});
});
I'm attempting to use the accordion for a very long list of records, where the accordion is wrapped in a resizable div that is given a fixed amount of space on the page and you would scroll to find the h3's that are too high or too low to see. The problem that I'm having is that the headers always force the size of their div, so the "overflow: scroll" is essentially ignored as the h3's spill out of the explicitly sized parent.
We are using jQuery 1.6.2, and UI 1.8.16
Seems to be working fine for me: http://jsfiddle.net/GVFsn/
try applying style="clear:both" to the parent, that should work.
The accordion is floated content, and the browser does not know where it ends.
Either that or steal the .clearfix class from FaceBook
Is it possible to have an accordion embedded in another accordion with jQuery UI?
-Item One
-Item Two
-Item Three
--Sub One
--Sub Two
--Sub Three
-Item Four
Where Sub One through Four is another accordion.
Thanks
Give each container that you want to make an accordion a class like accordion and use:
$(".accordion").accordion();
Just give different id names for each accordion and call them in the jquery function an you would have to edit the css to get the desired look though.
$(function() {
$( "#accordion,#accordion2" ).accordion();
});
DEMO
Is it possible to make the jQuery UI Accordion first loads collapsed, so, no tab will load opened or active in default.
I know the option to make it collapsible but I want it to load totally collapsed then the user choses one tab.
I'm using the latest jquery 1.4.4 + jquery UI custom 1.8.6
Thanks.
Set active to false
which is the same as setting each tab to display:none;
Can you use this:
jQuery Accordion open collapsed
http://forum.jquery.com/topic/collapse-accordion-all-at-once
Simply set all the according content elements to display: none. This will hide them all, until clicking the accordion title expands the content under it.
James
this worked for me:
$("#accordion").accordion({
heightStyle: "content", header: "h3", collapsible: true, active: false
});