Questions tagged [jquery-ui-accordion]

Accordion widget from jquery-ui that displays collapsible content panels for presenting information in a limited amount of space.

An accordion widget that is a part of the jQuery-ui library.

References

SO Quick Start Snippet

$(function() {
  $("#accordion").accordion();
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="accordion">
  <h3>Section 1</h3>
  <div>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.</div>
  <h3>Section 2</h3>
  <div>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.</div>
  <h3>Section 3</h3>
  <div>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.</div>
</div>

997 questions
82
votes
7 answers

JQUERY UI Accordion start collapsed

How can I make the jquery UI accordion start collapsed when the form loads. Is there any javascript code for this?
H Bellamy
  • 20,906
  • 22
  • 68
  • 110
46
votes
5 answers

Add items to a jQuery Accordion with jquery

I am using the jQuery accordion plugin to make an accordion of some data. Then I want the user to be able to add more data to the accordian. I have setup the accordion to function properly, then I've made a function that prepends a "list item" to…
espenhogbakk
  • 10,148
  • 8
  • 36
  • 36
35
votes
14 answers

jQuery UI Accordion Expand/Collapse All

I'm using the jQuery UI Accordion (which does not allow more than one item open at a time) on a project. Using accordion is appropriate since I usually do only want one panel open at a time. However, I need to offer an "Expand All" link which…
AlecRust
  • 7,882
  • 10
  • 39
  • 55
26
votes
2 answers

jQuery - Accordion Effect on a Table

I'm having difficulty implementing an accordion effect on three different tables using jQuery and I could use some assistance. Right now it works o.k. When I click on the header rows the subsequent rows show, but I'd like some type of animation. I'd…
user965879
  • 501
  • 1
  • 6
  • 16
20
votes
4 answers

jQuery UI: TypeError: $(...).accordion is not a function

For some reason the jQuery UI Accordion does not work. I keep getting this error: TypeError: $(...).accordion is not a function What am i doing wrong? Based on other answers on this site on similar topics, i think it has something to do with the…
chuckfinley
  • 2,397
  • 10
  • 29
  • 41
17
votes
3 answers

Dynamically adding and refreshing elements to the Accordion widget in jQuery UI

Several questions here on SO reference this open jQuery UI feature request for the ability to dynamically add/remove panels from the Accordion widget. The ticket itself is marked (closed feature: fixed) and from what I can tell from the unit tests…
Jack
  • 271
  • 1
  • 2
  • 8
15
votes
8 answers

Twitter Bootstrap 3 collapse when checkbox checked

Accordion have to collapse on checked checkbox. And must be hidden when it's uncheked. Here is code : http://jsfiddle.net/UwL5L/2/ Why it doesn't checks?
13
votes
3 answers

Fixing vertical jump at end of jQuery slideDown animation

I am new to Jquery but have written a simple vertical accordion. It seems to to the job I require, but at the end of the slide down there is a visible jerk. If anyone could look at it and suggest a solution, it will stop me pulling any more of my…
Ian
  • 133
  • 1
  • 5
11
votes
6 answers

knockout.js and jQueryUI to create an accordion menu

Got a slight problem trying to have jquery UI and knockout js to cohoperate. Basically I want to create an accordion with items being added from knockout through a foreach (or template). The basic code is as follows:
Tallmaris
  • 7,485
  • 3
  • 25
  • 57
11
votes
4 answers

jquery ui accordion - multiple accordions expand/collapse all - style issues

I'm attempting to create an accordion where I can expand/collapse all sections with a single click. I also need the ability for the user to open and close the sections having 0-n sections open at a time. Using several of the discussions here on…
tia
  • 974
  • 2
  • 15
  • 21
10
votes
4 answers

Find input button within a selected class div

How could I use jquery to find out this button within a div with class name "blueheaderbar accordionButton on" then change button value to "hide it"
user610983
  • 835
  • 2
  • 8
  • 13
10
votes
13 answers

jQuery UI Accordion activate

I'm not getting how to do this, or if I can do this. I have a jQuery UI Accordion, multiple sections with each section containing multiple anchor tags each with a unique string id. I'd like to be able to have the accordion open to where a particular…
eflat
  • 837
  • 2
  • 12
  • 33
10
votes
4 answers

How to extend the jQuery accordion plugin

How to extend a jQuery plugin? currently I am using multiopen accordion plugin. I need to add new feature like once the expand/collapse is finished I need to callback a function as like change event in jquery ui accordion plugin. How to add this…
SAK
  • 3,270
  • 7
  • 24
  • 38
9
votes
5 answers

How to disable jQuery accordion conditionally

I want to enable and disable or better to add and remove jQuery accordion on my menu conditionally, is it possible to add or remove this on screen rotate or screen-size change ? I tried it but It does not seems to be working, The accordion is…
Prafulla Kumar Sahu
  • 7,813
  • 7
  • 46
  • 85
8
votes
6 answers

How to cancel change event for accordion controls

$("#accordion").accordion({ change: function (event, ui) { alert('event have to be changed') }, changestart: function (event, ui) { return false; } }); Is it possible to cancel the change event?
Simbian
  • 18,275
  • 3
  • 15
  • 8
1
2 3
66 67