Stack Overflow
Stack Overflow

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
5
votes
3 answers

Open accordion panel on validation error

I am using jQuery accordion to split my forms into several panels and jQquery validation to check the required fields. It works great to show errors in validated fields as long as they are in the open panel. An example. Let's say I have tree…
perqedelius
  • 105
  • 1
  • 1
  • 10
5
votes
3 answers

javascript accordion / css not working properly

I have a blog page on which I have to list the posts using an accordion jQuery. I managed to get it to work but it's not rendering properly, more precisely: the height of the page does not enlarge accordingly to the post size. You can see it here:…
George Grigorita
  • 1,468
  • 3
  • 23
  • 39
4
votes
1 answer

How can I force jQuery UI to ignore certain elements in the Accordion

I have a Jquery UI Accordion to which I add certain elements dynamically. I use self-written sorting code that allows me to add dynamic Accordion categories in the proper alphabetical order. The problem I have run into is that if the dynamic element…
Serj Sagan
  • 24,625
  • 17
  • 133
  • 166
4
votes
2 answers

Changing sidebar height when dynamic content is added

I have a 'sticky sidebar nav' that is positioned absolutely relative to the #sidebar div, so it follows the page down on the left hand side and is always available. To make this work I had to add a height to the sidebar, so I used some code to find…
Tom
  • 83
  • 1
  • 2
  • 10
4
votes
1 answer

How to prevent event propagation of a click on an accordion header?

I have a problem with the jquery sortable plugin. Indeed, I have items (questions) which use both accordion and sortable. I use the update event of sortable to show extra content in each question accordion. But my problem is that after sorting the…
Romain Guidoux
  • 3,784
  • 3
  • 24
  • 45
4
votes
1 answer

Extra Padding From Bottom Of Div After jQuery Accordian Script Is Actived

I have designed a website that consists of the "body", a "container" to hold and center a "content" div on the page. The height of the "content" and "container" divs is set to 100%, I have also added an Accordian jQuery Script within the "content"…
Aaron Brewer
  • 3,363
  • 17
  • 45
  • 73
4
votes
2 answers

close a section of a accordion in jquery

It's a simple question, but i don't know how do it. I think there's a way to close all of the sections in the accordion attached to a event click, but i haven't found a method that will allow it to be done. I tried…
Jorge
  • 16,426
  • 17
  • 75
  • 120
4
votes
2 answers

Using jQuery Plugins with live()

I have a page that dynamically loads content with the jQuery load() function, so I need to use live() for each of my jQuery functions on this page. However, I am unable to get live() to work with jQuery plugins. For example, I want to use jQuery…
Jarred
  • 1,746
  • 5
  • 25
  • 42
4
votes
1 answer

jquery-ui accordion - How to dynamically create a new section

I want to know whether there exists a method that I could add a new section using jQuery UI This is what I do so far without any error, but the accordion don't work since I add a new one $( function() { $( "#accordion" ).accordion(); …
Tony Chou
  • 460
  • 1
  • 6
  • 21
4
votes
1 answer

jQuery UI Accordion on ul

How do I get the jQuery UI Accordion to work when I need to put a wrapper around each element? Example HTML:
4
votes
4 answers

jQuery UI Accordion (hiding all by default)

Hello I am using jQuery UI Accodions By default, the first accordion is shown and other are hidden. I would like to hide all the accordions by default until the user clicks it. How do I do that ? Thank You
Atif
  • 9,948
  • 19
  • 60
  • 95
4
votes
2 answers

jQuery UI accordion issue

I use the jQuery UI accordion widget, and between every item I have some space. The issue is that in IE 8 , when you slide an item, it slides fine, but it removes the space between it and the upward item. It works good in FF and other browsers,…
Alon Gubkin
  • 53,054
  • 52
  • 181
  • 282
4
votes
1 answer

jQuery UI accordion makes all sections the same size as the biggest one

I am using the jQuery UI accordion effect and I can't seem to size the divs correctly. I want the second one to be 900x900 to fit an embedded map. The former section only needs to be around 400 high and I'm not able to solve the problem with the CSS…
Vincent
  • 1,334
  • 2
  • 16
  • 22
4
votes
3 answers

heightStyle: "fill" is not working for accordion in Jquery

- With the change in dimension of container I'm able to customize width that is defined in #backlogEpic i.e 526px but height is not customizing . To fill the vertical space allocated by its container,i have set the heightStyle option to…
Little bird
  • 1,068
  • 7
  • 26
  • 52
4
votes
1 answer

Accordion not working

I am trying to use accordion. The function I'm using is $(function() { $("#accordion").accordion({ collapsible: true, heightStyle: "content" }); }); The function works properly but only if i add the libraries on the same…
user1752925
  • 41
  • 2
1 2
3
…
66 67