jQuery UI Accordion - Adjusting Panel Height to Content Size

Currently, I am utilizing jQuery UI's Accordion feature from http://jqueryui.com/demos/accordion/, and my goal is to adjust it so that it resizes based on the contents of each panel rather than just fitting the largest one.

In addition, I am seeking a solution to make a specific panel open by default when the page loads. Ideally, I want the bottommost panel to be open initially. Is there a way to achieve this?

Any assistance is greatly appreciated!

UPDATE: Attempted adding height:auto !important; in the jquery-ui.css file under 

.ui-accordion .ui-accordion-content-active
to address the resizing issue, but encountered a strange problem where one panel remains open while another is opening upon closure.

javascripthtmlcssjquery-uiaccordion

Answer №1

Keeping up to date, it appears that in jquery UI version 1.9, the autoHeight feature has been replaced by heightStyle. You can find more information at http://api.jqueryui.com/accordion/#option-heightStyle

After version 1.9, you can set the heightStyle with this code: 

$( ".selector" ).accordion({ heightStyle: "content"});

While autoHeight may still work in most cases, I encountered issues in Chrome and Safari when using autoHeight: false with an image set to auto height within .ui-accordion-content. Switching to heightStyle proved to be a better solution.

Answer №3

Although this question is quite old, jQuery now offers the ability to adjust height according to content. For more details, visit: http://api.jqueryui.com/accordion/#option-heightStyl 

   $(function () {
            $("#accordion").accordion({
              {heightStyle: "content" }
            });
        });

Answer №4

this technique is really effective for me

$(document).ready(function () {
        $("#accordion").accordion({
            header: "h3",
            collapsible: true,
            heightStyle: "content" 
        });
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhance the php query limit using javascript when loading additional content

Hey there, currently working on implementing a reverse infinite scroll feature for a private messaging module. Everything seems to be functioning well, except for one issue I'm facing - struggling to update the query limit. I set the maximum and lim ...

phpjavascript

Looking to streamline a JavaScript function, while also incorporating jQuery techniques

I've got this lengthy function for uploading photos using hidden iFrames, and while it does the job well, it's quite messy. I'm looking to simplify it into a cleaner function with fewer lines of code for easier maintenance. function simplif ...

javascriptjqueryfunction

Transform array sequences into their own unique sequences

Reorder Array of List to Fit My Custom Order Current Output: [ { "key": "DG Power Output", "value": "6.00", "unit": "kWh", }, { "key": "DG Run Time", "value": "5999999952", "unit": "minutes", }, { "key": "Fuel Level (Before)", "value": "8.00" ...

javascriptarraysangulartypescriptsorting

Nested promises utilized within functional programming techniques

Working on an Angular project involves developing a booking system with various scenarios. The challenge lies in handling different server calls based on the response of a promise, leading to a nested callback structure that contradicts the purpose of prom ...

javascriptangularjsfunctional-programmingpromise

Serve an HTML file with CSS/JS directly from the server disk to the client's browser

I'm currently facing a challenge that involves securely rendering and serving HTML files (along with CSS, JS) from the local disk on the server to a web application running in the client's browser. APPLICATIONS A front-end web app is built usi ...

htmlreactjsasp.net-coreasp.net-web-apireact-admin

Table for maximizing space within a cell (Internet Explorer 8)

I am attempting to make the "innerTable" fill up all available space within another table. The issue is with IE8 (no compatibility mode, IE8 browser mode, Doc mode IE8 Standards). The table does not expand to fit the containing TD. I tried enclosing the ta ...

htmlcsshtml-tableinternet-explorer-8

Changing the designated materialUI class

Within the project, I am utilizing this theme: export const theme = createMuiTheme({ ...defaultThemeConfig, overrides: { ...defaultThemeConfig.overrides, MuiListItem: { root: { '&:nth-child(odd)': { backgro ...

javascriptcssreactjsmaterial-ui

Strapi: Enhancing User Experience with Unique Passwordless Customization Services

I have been attempting to modify the "passwordless" strapi plugin in order to generate verification codes consisting exclusively of digits. To achieve this, I need to override the createToken function within the plugin's service. Following the instru ...

javascriptnode.jsstrapi

Generate a fresh array using the information extracted from a JSON file

I need assistance in extracting a new array from JSON data. The desired output should be an array containing "itog" values. [12860498,20156554,19187309] [ { "0": { "itog": 12860498, "return": ...

javascriptvue.js

Load image asynchronously using a mirror server in React/Next.js with a set timeout time

For my website, I have decided to store all of my images on IPFS, which are pinned successfully. This has helped reduce traffic and keep costs within the free tier offered by my hosting provider. However, at times the IPFS url may not load fast enough dep ...

javascriptreactjsnext.jsipfs

Centering text using CSS Bootstrap

Hey everyone, I've been attempting to center my text using Bootstrap, but for some reason it's not working. Can someone help me figure out what's going on? <footer class="row p-1 mt-3 bg-primary text-white"> <p class= ...

htmlcssbootstrap-4

Ensure props are properly sanitized in Vue 3 before utilizing them

How can I efficiently clean up props in Vue 3 before using them? I am faced with the challenge of handling props that can be either objects or stringified JSON versions of those objects. Currently, the application I'm working on tackles this issue by ...

javascriptvue.js

Linking various nodes together using the capabilities of the Web Audio API

I am experimenting with audio and trying to achieve a few specific goals: Adjust the overall volume of the audio. Modify the volume and delay of a particular channel (left). This is the code I have been working on: var audioContext = window.AudioContex ...

javascripthtmlweb-audio-api

Guide on aligning a non-fixed child within a fixed parent container

I am working on a project with a fixed container (div#popup) that has some CSS styling. The container is set to position:fixed, with specific dimensions, border radius, and background color. Within this fixed container, there is a form element that I am h ...

htmlcss

Ways to display content exclusively to logged-in users

Currently, I am working on a website and facing a challenge in displaying certain elements on the navbar only if the user is logged in. The structure of my project involves using inheritance, which means that the navbar is included in my layout.html file. ...

pythonhtmlinheritanceflaskconditional-statements

Ways to display the page's content within a div container utilizing Jquery

I am attempting to display the content of a URL page (such as ) within a <div> using JQuery, but so far I have been unsuccessful. Here is an example of what I am trying to achieve: <div id="contUrl"> .. content of google.fr page </div> ...

javascriptjqueryhtml

When jQuery adds new elements, their CSS may not be applied accurately

One issue I encountered is using jQuery to dynamically add new elements, only to find that the CSS isn't being applied correctly to the newly added element. To illustrate this problem, I created a jsFiddle. In the example, there are differences in sp ...

jquerycsstwitter-bootstrap

Tips for testing views in ember.js using unit tests

We are currently delving into the world of Ember.js. Our development process is completely test-driven, and we aim to apply the same methodology to Ember.js. Having prior experience in test-driven development with Backbone.js apps using Jasmine or Mocha/Ch ...

javascriptunit-testingmodel-view-controllerember.js

Filtering a string array in Angular based on an object's value

I am facing a challenge with two arrays in my code. The first array, $scope.termini, contains strings, and the other one, $scope.reserved, contains objects. Each object in the second array has a variable called vrijemeTermina. My goal is to filter $scope.t ...

javascriptangularjsjsonangularjs-filter

Having some trouble finding the input box element with Python/Selenium

I'm struggling to automate a task using Python. For some reason, I can't find the email input element with driver.find_element_by_. No matter what I try, I just can't seem to locate it. All I want is for Python to log in using Chromedriver. ...

pythonhtmlselenium