Dynamic accordion that adjusts to each panel's content

[jal18]

I like to use the <div class="enhanceable_content accordion"> but the way it currently works is that the height of all panels is fixed to the height of the panel with the most content, meaning the panels do not auto adjust to the content. Can the accordion code be altered to allow each panel's height to fit the content within that particular panel?

Thanks in advance for your help,

J.

[canvas_admin]

 @jal18 ​,  in order to accomplish that, you need to insert "heightStyle: 'content'" into the javascript somehow.  I'm not sure if you can do that within the content page itself or if you can add it to your institution's global JS file.

I use KennethWare 2.0 and  @kenneth_larsen ​ has it set up to automatically size to the length of the content within each accordion panel.

Here's some further documentation on it that you might find helpful:  https://jqueryui.com/accordion/#no-auto-height

[syeo]

The script will have to be added to the Javascript

[jal18]

Thanks Mark

[Robbie_Grant]

 @jal18 ,

We are giving the Instructional Designers area a little bit of love and just want to check in with you.  This will also bring this question new attention. 

Were you able to find an answer to your question? I am going to go ahead and mark this question as answered because there hasn't been any more activity in a while so I assume that you have the information that you need. If you still have a question about this or if you have information that you would like to share with the community, by all means, please do come back and leave a comment.  Also, if this question has been answered by one of the previous replies, please feel free to mark that answer as correct.

Robbie

[pecchiog]

This looks amazing but i noticed that the date is a year ago and was wondering if this still works. When I paste any of the html codes listed in here for collapsible content, I simply get links with text or colored tables with a link. I would like a customizable box/table that collapses and fits content in it. I would also like for images...videos...etc. to stay within the area and not be distributed to all areas. Any ideas? Thank you in advance!