This content is hidden both visually and aurally, and doesn't appear in the keychain until the button is activated (expanded = true).
This content is available by default until the button deactivates it (expanded = false) which removes it visually, aurally and from the keychain.
Add the attribute data-pab-expand to the dt to open it by default.
Any question may be expanded on page load by referencing its id in the URL.
For example this content could be automatically opened by adding "#faq_3" to the URL in the address bar like so:https://codepen.io/2kool2/pen/ZOkojB#faq_3
The focus caret is moved to the activation button when referenced in this manner.
The height of a hidden block is calculated when the activaton button is pressed. It's also recalculated when the browser window is resized.
In fact this module should easily scale to 300%, limited only by the display width and word length.
COPYRIGHT © REBECCA LOUISE 2018
Sign up to get your FREE workout and meal plan!
Hey Girl!FREE Workout & Meal Plan kickstarter pack plus access to the LIVE classes. Just add your email below!
FREE April Workout Calendar + Nutrition Guide. Just add your email below!