jQuery Accordion expand first enabled panel - javascript

I am using a jQuery Accordion but I have a small problem: Based on some conditions, my accordion could have the first enabled H3 to be the second or third one. The first ones I am disabling by adding this class to them
"ui-state-disabled".
My accordion looks like this:
$("#accordion").accordion({
active: true,
animate: false,
collapsible: true,
heightStyle: "content",
icons: icons
});
Is there a way so that the accordion will only expand the first enabled section? Right now, if I put active: 0 and the first element is disabled, it will expand it nonetheless.
Any suggestions ?

This may not be the most elegant of solutions, but it'll work. You need to find the index of the first H3 inside the #accordion element that does not have the class .ui-state-disabled... so here's that.
You may also realize this already, but you'll want to remove the ability to click to open disabled sections, so I threw that in.
$("#accordion").accordion({
active: $('h3:not(.ui-state-disabled):first').index('#accordion h3'),
animate: false,
collapsible: true,
heightStyle: "content",
icons: icons
});
$(".ui-state-disabled").unbind("click");
Demo on Codepen
edited to add back in your icons: icons

Related

Can fixedColumns be used with paging and without scrolling vertically?

I have a table with paging.
I'm trying to fix certain columns, but don't want to get rid of the paging, I simply want to add horizontal scrolling, but not vertical.
Can this be done with the FixedColumns plugin?
I've tried specifying the options like this:
table.dataTable({
autoWidth: false,
ajax: "/Source",
deferRender: true,
//fixed Column
scrollX: true,
fixedColumns: {
leftcolumns:1
}
//
}
fix on your browser first using inspect element by changing CSS and then the final change in coding by writing *!Important** on CSS where you change. then you successfully set according to your wish.
simple replace dataTable CSS with custom CSS by writing !important.

jQuery Accordion disabled section icon

I am using a jQuery accordion and with some help I managed to figure out most of my issues but now I have one that I could not figure out.
My accordion looks like this
$("#accordion").accordion({
active: true,
animate: false,
collapsible: true,
heightStyle: "content",
icons: icons
});
and I have 2 icons defined for opened and closed sections.
I also have in my accordion some disabled sections that are closed and cannot be expanded. As far as I can see it's either all icons for all sections or none at all.
Is there any way of removing the icon for just the disabled sections ?

How to make TinyMCE to fit content height when it's read only?

Please help because I'm stuck from hours. I have multiple count of text areas in one page. Each text area has different content inside which makes it with different height. When I init TinyMCE like this:
tinyMCE.init({
mode: "textareas",
theme: "advanced",
width: "870",
readonly: true,
theme_advanced_path: false,
theme_advanced_resizing: true,
theme_advanced_resize_horizontal: false,
auto_resize: true
});
All text areas are with same height and those of them which have more content has scroll inside. Any ideas how to rid of the scrolls and make the text area height as much as the content inside ?
Have a look at the function resizeIframe in this SO thread. You will need to issue this code after the readonly editors have been initialized.

Jquery UI Accordion collapse before open

I have a simple Jquery UI accordion with 3 sections. All 3 sections are collapsed in the beginning. When I click on a section header, the section content should show (slide) up. The special thing is now that the section content divs are positioned absolutely over each other.
To make it look good I want that the current opened section toggles completely before the animation of showing the next section begins.
This is what I have made to toggle the section it right now:
$(function () {
$("#accordion").accordion({
create: function (event, ui) {
ui.oldPanel.slideToggle("slow");
},
collapsible: true,
active:false
});
});
You can see how it looks like on:
http://jsfiddle.net/kqMAR/
It appears that the toggle and show up animation start at the same time. But what I want is to toggle it completely before starting the next slide up.
New Answer :
Try this
http://jsfiddle.net/6QJJp/1/
This is what you exactly need
you will need to fix CSS according to you requirement.
$(function () {
$("#accordion").accordion({
animate:{duration:5000},
collapsible: true,
active:false
});
});
Use above function to understand what is happening actually, new section starts opening as soon as the old section starts closing that's why its giving an illusion of incomplete animation. for complete animation place the buttons one below another then you will be able to see proper animation. If you require horizontal arrangement then you can possibly use fading effect that also looks cool.

Hide Page navigator in a jquery grid

How I can hide View text and page navigation in a jQuery grid navigator?
Thanks a lot!
You can use the viewrecords option to hide the view text:
viewrecords: false
You can set the following pager options to false to disable page navigation:
pgbuttons: false,
pginput: false,

Categories