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
});
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 am using Bootstrap accordion and I love the way it works in this example. However, I'd like to be able to toggle an additional section outside that accordion.
Is there a quick trick or should I try to develop my own widget?
Not sure about the bootstrap accordion, but you could add some simple jQuery:
$(".accordion-toggle").on(click, function() {
$(".other-section").toggle();
});
The trick is to bootstrap event hooks
"Bootstrap's collapse class exposes a few events for hooking into collapse functionality."
$('#myCollapsible').on('hidden', function () {
// do something…
})
Check doc here: twitter bootstrap collapse
I'm using the jquery datatables plugin and added some custom jquery-ui buttons to the table footer.
To use the datatables plugin with jquery-ui theming the "bJQueryUI" option has to be turned on.
So far no problem, but now I added the jquery-ui themeroller to my page.
When I change the theme, all the jquery-ui components change their style accordingly, just like the datatable, except for the buttons within the datatable.
I found out that it actually is a css-priority issue: the new styles applied by the themeroller got lower priority than the original styles, so these buttons never change their look.
As the jquery-ui components and the datatables plugin both are quite popular I thought I would find someone with similar problems, but had no luck so far..
That's how the initialization of the datatable and the creation of the custom buttons are done:
<table id="DataTable">
// ...
</table>
<script type="text/javascript">
$(function ()
{
var oDataTable = $('#DataTable').dataTable({
"aaData": result.aaData,
"bPaginate": false,
"bJQueryUI": true,
"bInfo": true,
"sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ipT<"toolbar">>',
"oTableTools":
{
"sRowSelect": "single"
}
});
// add buttons
$("div.toolbar").html('<button id="AddButton">New element</button>');
$("#AddButton").button().click(function () { /* ... */ });
// add more buttons...
}
</script>
Here's a screenshot of the actual html structure and applied css-styles:
http://i.stack.imgur.com/vbAuy.jpg
Any hint is greatly appreciated.
I found the solution myself:
If I add the "ui-widget-content" CSS-class to the toolbar-container div, the styles get applied correctly.
To remove the styles which that class applies (border and background), I added a more specific CSS style to remove these:
div.toolbar
{
float: right;
border: 0;
background: 0;
}
It's important here to use "div.toolbar" not ".toolbar", otherwise the ui-widget-content styles get applied.
Now the toolbar container doesnt get unwanted styles applied and the buttons inside correctly get the selected theme.
Maybe that's helpful for someone using the themeroller with custom jquery-ui buttons in datatables.
IF you want the theme to control the style of the button, then comment out the CSS that is overriding the theme roller style.
If they are themed buttons, then you will have to remove your CSS to allow the theme to take affect. Themes are made to be easily over-writable so you can add customization, only it sounds like you no longer want the customization.
Not sure if you had this problem but there are two separate css classes with datatables. Which one to use depends on if you have bJQueryUI:true or bJQueryUI:false
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.
I am having trouble with jQuery accordion. When I create a content pane where the non-default pane has more content than default pane, and autoHeight is true, this provides nice animations when switching panes, but the non-default pane gets a scrollbar which I don't want.
You can see this in action by going to http://jqueryui.com/themeroller/, switching to a theme like "Blitzer" or "Humanity", and then opening Section 3 of the example accordion. Happens to me with Safari 3.2.1 and Firefox 3.0.8.
If you switch to autoHeight=false, then this does not happen and all content panes have the correct height, but the content pane is only rendered at the end of the animation and looks strange, so I had to turn off animations to avoid this strangeness.
Either I am misreading something, or this is a bug in jQuery UI accordion. Please help me figure out which of the two it is (or maybe both).
I tried several different things. autoHeight: false by itself did not work. This is what finally worked for me:
$( "#accordion" ).accordion({
heightStyle: "content",
autoHeight: false,
clearStyle: true,
});
I'm using this in a SharePoint content editor webpart with a fixed width, which added to the height issue when adding content to the accordion widget.
using this combo options works for me, 1.current version of jquery/ui
$( '#x' ).accordion({
autoHeight: false,
clearStyle: true
});
I faced similar problem, for me the following change in CSS worked.
.ui-accordion .ui-accordion-content{
overflow:visible !important;
}
Nowadays (with jQuery UI - v1.8), just autoHeight is enough, no more scrollbars are appearing.
jQuery("#accordion").accordion(
{
autoHeight:false
}
);
Having heightStyle: "content" helped resolve my issue.
Reference: Accordion
I know this is old, but I was having this problem and landed here. A solution that doesn't break your animation and gets rid of the animation can be found here:
http://webdevscrapbook.wordpress.com/2012/02/24/jquery-ui-unnecessary-scrollbar-in-accordion/
For those lazy few who don't want to click, the short answer is:
.ui-accordion .ui-accordion-content { overflow:hidden !important; }
in the accordion's CSS
try this
http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion
I got this from the http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion link mentioned above. It was one of the comments under the article. It gets rid of the scroll bar but also keeps the rest of the divs formatting. The above answers can cause content to flow over borders as was happening me.
.ui-accordion .ui-accordion-content{
height:auto!important;
}
This works for me:
.ui-accordion-content-active, .ui-accordion-header-active{
display: block;
}
I tried
.ui-accordion .ui-accordion-content{ overflow:visible !important; }
but I saw some visual artifacts with first tab. So I fixed the problem this way:
<script type="text/javascript">
(function() {
var fixScroll = function(event, ui) {
$(event.target).find('.ui-accordion-content-active').css('overflow', 'visible');
}
$('#tabs').accordion({
header: "h2",
create: fixScroll,
change: fixScroll
});
})();
</script>
Check if the padding for the ui-accordion-content is being overridden.
I experienced the same issue when I had put the following in my css:
.container .ui-widget-content {
padding-right: 3%;
}
I changed it as shown below and the scroll bars were gone!
.container .ui-widget-content:not(.ui-accordion-content) {
padding-right: 3%;
}
I don't have auto-height turned on either.