JavaScript Webpage Workout - M1 Lesson 4 exercise 5

This exercise follows Lesson 4 exercise 4. Please do that exercise first for this exercise to make more sense or start from Lesson 1 if this is your first time to the course.

📺 This Lesson 4 Exercise 5 is also available as a video.

Exercise to create a collapsible drawer.

Exercise 5 will toggle an HTML element’s height property enabling us to hide and reveal some information on the webpage. Hiding information is quite a common technique to declutter a webpage making it easier for a visitor to focus on the ‘headlines’ of the site rather than getting lost in the informative details. Collapsible menus allow the user to make the choice to access that information by clicking on a element such a button.

With that in mind, here’s what you will build.

1. Create an HTML button element with the text content of “Learn More.” and a “down-arrow” icon
2. Create a section or div with a paragraph of filler text.
3. Hide the paragrah of text. You can do this a few different ways with CSS but also experiment with the height property to see if you can get it to work.
4. When the “Learn More” button is clicked, reveal the paragraph of text and also change the button’s “down-arrow” icon to an “up-arrow” icon. Try to reveal the paragraph of text with a smooth transition.
5. When the button is clicked a second time, the paragraph should transition to hidden and the button’s “up-arrow” icon should change to a “down-arrow” icon.

Remember to keep the C-A-M-E-L work sequence in mind. Don’t forget about the style property, classList and className. Ask yourself, “Have I created all the elements I need for this project? Am I accessing with JavaScript the elements I want to manipulate on the webpage and the elements that will have listeners attached to them? Which element when clicked does what? The what will define my CSS and my event handler function. Does my event handler function need a bit of conditional logic or not?”

You can compare your work with mine here at CodePen or watch the video.

Lesson 4 Exercise 5

Looking for more practice? Build this curtain menu. It uses everything you’ve learned to this point. Once you’re done, compare it with my code.

Congratulations on completeing Lesson 4 about Toggling element states. You learned about the property className as well as classList and some helpful methods to use with it such as add, remove, toggle and contains. You also got further practice with textContent and how to set an HTML element’s text within your event handler functions. You also learned how some modern icon libraries set their icons and how to manipulate them using classList, className or textContent.

Lessons 1 to 4 focused on creating, accessing and manipulating single HTML elements on the DOM.

In the next module of lessons, we will focus on creating, accessing and manipulating multiple HTML elements such as all p elements or all div elements sharing the same class. That means we’ll get some practice using JavaScript’s for and for of loops and iterators such as forEach.

But first, let’s organize what we’ve learned so far by creating a “JavaScript Toolbox.” Move on to the next lesson for that.