Awesome Accordions website

Making it responsive

Default Maximum Height Setting

Making the accordion responsive is important so that they can scale well across all screen sizes. By default, the accordion content has a max-height 0px and overflow hidden. This allows us to show the title only and exclude the content.

How it works Opening the Accordion

When a user clicks to open an accordion item, we calculate the height of the content. The max-height applies to only the container so the content added to the accordion has real height, even when it is hidden. This ensures the content adjusts appropriately and fits on the available screen area.

Resizing Event

In resizing event (landscape-portrait or other resize event) the script recalculates again the height of the elements that are open and adjust accordingly.

Code

To create the open or close effect the CSS rules are adjusted in jQuery for the specific element as shown in the code snippet below :

Default height : CSS(“max-height”, 0)

Updated height : CSS(“max-height”, nh + “px”)

The height is updated by updating the default max- height with the new height of the content (nh). To make the process smooth we utilize the “transition” CSS rule and add the smooth effect instead hard open/close.