jQuery Accordion on WordPress

Posted on 2013-10-28
Medium Priority
Last Modified: 2013-10-29
The accordion on my page chops off some of the text (please see toggle 4 on link below).  How do I set the accordion to expand as far as the last line of the text no matter how short/long the content is?


View Sample Here
Question by:E-Dub
LVL 15

Assisted Solution

eemit earned 400 total points
ID: 39607343
Set the heightStyle option to:
heightStyle: "content"
heightStyle: "fill"

According to jQuery Documentation:

- Setting heightStyle: "content" allows the accordion panels to keep their native height.

- To fill the vertical space allocated by its container, set the heightStyle option to "fill", and the script will automatically set the dimensions of the accordion to the height of its parent container.
LVL 38

Accepted Solution

Tom Beck earned 1600 total points
ID: 39607373
Yes, what @eemit said. Add heightStyle: "content" at line 2659 in your main.js file.

            autoHeight: false,
            active: activeTab,
            collapsible: false,
          heightStyle: "content"

"fill" is not going to get you the desired effect in this case.

Author Closing Comment

ID: 39608282
@ememit, thank you for pointing me in the right direction and explaining the difference between "content" and "fill."

@tommyBoy, thank you for going the extra mile and showing me exactly how and where to put the code.

You guys rock!

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

588 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question