accordion

I've a 3 level nested bootstrap accordion which is working fine, but I want a change in the panel-heading div where I can use a font-awesome icon fa fa-chevron-down when the accordion is opened (Without affecting the nested accordions) and fa fa-chevron-right when accordion is collapsed. I'm using this code to changing the icon: $('div.panel-collapse.collapse').on('shown.bs.collapse', function() { $(this).parent().find(".fa-chevron-right").removeClass("fa-chevron-right").addClass("fa-chevron-down"); $(this).parent().find('.panel-heading').css('background', '#0271BC'); }).on('hidden.bs.collapse

I have an html structure that looks like this: <h5>Title</h5> <p> Content </p> <ul> <li>Item</li> <li>Item</li> </ul> <p> Content </p> <h5>Title</h5> <p> Content </p> <ul> <li>Item</li> <li>Item</li> </ul> <p> Content </p> In summary it's just some headers with content below them, I just need everything below the header tags in a div like this: <h5>Title</h5> <div> <p> Content </p> <ul> <li>Item</li> <li>Item</li> </ul> <p> Content </p> </div> I've tried using the .wrap function of jQuery but no luck since there can be multiple types elements below the header tags, I found this question:

I am working on a project using java and javaFX , i need to know if there is a way to have the first TiteledPane in the Accordion opened by default .. I mean when the stage is loaded , the first TiteledPane is selected and its content showed without any user's intervention . i tried all suggested methods but no one look like what i want. As i see also no described one in the official documentation or given in this site or other is like. IN ADDITION: here is my approach:(Code java and FXML) @FXML private Accordion accord_pane; @FXML private TitledPane pane_ara,pane_sci,pane_soc,pane_art,pane

I am trying to databind a DataTable to an accordion and I have found that If I retrieve the DataTable from a database using a table adapter it binds to the accordion perfectly however what I want to do is create a dummy table (for testing purposes if I don't have access to my database) the code to create the dummy table is below: DataTable table2 = new DataTable("articletable"); table2.Columns.Add("articleID"); table2.Columns.Add("title"); table2.Columns.Add("content"); DataRow row = table2.NewRow(); row[0] = "1"; row[1] = "article name"; row[2] = "article contents go here"; table2.Rows.Add

Header script section. $(document).ready(function(){ var show_link = '/hr/resitration'; // That is current url. var accordion = $("#accordion"); active = ???? // How to found activ url??? accordion.accordion({ header: "h3", active: active, autoHeight: false }); }); in HTML section <div id="accordion"> <h3><a href="#">Dashboard</a></h3> <div> <ul> <li><a href="/dashboard/my" >My works</a></li> <li><a href="/dashboard/send" >Send works</a></li> </ul> </div> <h3><a href="#">HR</a></h3> <div> <ul> <li><a href="/hr/resitration?add=true" >Add Staff</a></li> <li><a href="/hr/resitration" >Staff list<

Thanks to @ifaour for a lot of his help! This script includes: Jquery accordion using unordered lists. Active and Inactive states with toggling bullet arrow images Expand All / Collapse All that swaps its text. Equal height columns that expand and collapse when the accordion expands and collapses You can view a demo here http://jsbin.com/ucobo3/24/ (function($) { $.fn.equalHeights = function(minHeight, maxHeight) { tallest = (minHeight) ? minHeight : 0; this.each(function() { if($(this).height() > tallest) { tallest = $(this).height(); } }); if((maxHeight) && tallest > maxHeight) tallest =

I am trying open & close accordion panes programatically. Here is the simplified version of my code. Even though I set the first pane's selected to false and and second pane's selected to true, only the first pane opens when it loads on the browser (FF3). var accordionContainer = new dijit.layout.AccordionContainer().placeAt("test"); var accordPane = new dijit.layout.ContentPane({"title": "test", "content":"hello"}); var accordPane2 = new dijit.layout.ContentPane({"title": "test1", "content":"hello1"}); accordionContainer.addChild(accordPane); accordionContainer.addChild(accordPane2, 1);

I am developing a web-page in PHP that needs following functionality: 1. When User click on "Say Thanks" it should be changed with "Done!". 2. At the same time I want to call an action in indexController. 3. At this time I want to show "loading...." 4. The current page has a lot of dynamic contents that should also not change. Please suggest me what should I do to complete above tasks...... I figure you need an AJAX call. I usually do that for loading comments and such when you press "more". In my case, there's an empty div and an <a> tag with the link to the comments view (with a separate

I have a jquery accordion that loads a lot of data. This accordion is generated by querying a database. My question - is there a way to not load the content until a specific element of the accordion has been clicked? Basically, I'd like to replicate the functionality of the jquery tab ajax content load to the accordion. I am using jquery ui-1.11.4 and had this same issue. This is the solution I pieced together. The Javascript: var already_loaded = new Object(); // used to track which accordions have already been loaded $(function() { $( "#accordion" ).accordion({ collapsible: true, active: