Inject and manipulate HTML

Keyboard Shortcuts

It is important to keep the HTML in the file as minimal as possible, making it more accessible and searchable. It’s also faster to create and update. However, we need to add additional HTML in order to structure our content so we can calculate the height of the expanding content, and create an interactive experience.

- [Voiceover] Now before we start writing our JavaScript,…it's important to understand what…we're going to be doing to the HTML.…It's important to keep the HTML file as minimal as possible,…making it more accessible and searchable,…as well as faster to create and update.…However, we need additional HTML elements…in order to structure our content so we can calculate…the height of the expandable content area…and create the interactive experience.…So first, we'll add a content div…around the expanding content.…And then we'll create a container div…around all of that expanding content.…

We'll also need an element to act as a link or trigger,…so we'll grab that text in the data attribute…and wrap that into a div as well.…So when we're done, we'll have transformed…this small amount of HTML into this more complex structure,…which gives us enough nested HTML elements…to create the interactivity.…And then once we've completed adding our CSS and JavaScript,…the user will not see the content inside of those containers…until they click or tap on the trigger element,…

Resume Transcript Auto-Scroll

Author

Released

8/31/2016

Learn to create content that is expandable with a single click. This technique is very popular for providing more on-demand information, such as FAQs, biographies, or additional product information. In this course, Chris Converse shows how to create the HTML, CSS, and jQuery code needed for an expandable content panel that hides and shows content at the user's request. Learn how to inject additional markup, style the different panel elements, set trigger states, and animate the panel to reveal the hidden content.