Students add the first JavaScript behavior to the homepage: a Show More button that reveals and hides supporting content. The lesson combines patterns from several short JavaScript lessons so students can see how HTML, CSS, and JavaScript work together without treating JavaScript as a separate or abstract subject.

Lesson Overview

  • Course: Introduction to Web Coding
  • Lesson: 10 of 12
  • Suggested duration: 60 minutes
  • Primary concept: Web Coding
  • Project milestone: Create scripts.js and add a working Show More interaction

Learning Objectives

By the end of the lesson, students should be able to:

  • Explain JavaScript as the behavior layer of a webpage.
  • Identify the button, target content, click event, selector, and class change involved in the Show More interaction.
  • Describe how JavaScript can toggle a CSS class to change what appears on the page.
  • Read, adapt, and test a small JavaScript pattern without needing to memorize it.

Key Concepts and Vocabulary

  • JavaScript
  • Behavior
  • Event
  • Click
  • Selector
  • Method
  • Class
  • Toggle

Materials and Resources

  • The student website from Lessons 1 through 9
  • A text editor and web browser
  • The existing index.html and style.css files
  • A current website example selected by the instructor that reveals or hides content after a user action
  • JavaScript, Change Class, Click Button, and Show Content
  • Buttons and Presence as supporting references

Prior Knowledge

Students should understand HTML classes and selectors, should be comfortable editing CSS, and should already have a complete responsive homepage with clear interaction feedback from Lesson 9. No previous JavaScript experience is required.

Opening Activity

Look at a website that uses a Show More, Read More, accordion, or similar interaction. Ask students what changes after the user clicks and whether the browser needed to load a new page to make that happen.

Connect the example to the JavaScript summary: HTML provides the content and structure, CSS controls appearance, and JavaScript can respond to an action and change the page after it has loaded.

Direct Instruction

Explain that JavaScript can become complex, but students do not need to learn programming comprehensively before they can understand a useful interaction. This lesson combines three small ideas that each have their own AI Coding Educator lesson.

  • Click Button shows how JavaScript can wait for a button click.
  • Change Class shows how JavaScript can add, remove, or toggle a CSS class.
  • Show Content shows the general pattern of revealing content that begins hidden.

For the course project, combine those ideas into one prescribed pattern: the HTML contains a button and extra content, CSS defines the hidden and visible states, and JavaScript listens for the button click and toggles a class on the extra content.

Walk through one complete working example line by line. Students should be able to answer four questions: Which element is selected? What event is being listened for? What code runs after the event? Which class changes as a result?

Professional developers routinely refer to documentation, reuse familiar patterns, and use AI to help generate or explain straightforward code. Students do not need to memorize the exact click-handler syntax. They do need to understand enough to recognize the parts, change the correct names, test the result, and notice when the code does not match their HTML or CSS.

Recommended AI Coding Educator Lessons

This is one of the strongest places in the course to use both the Code Sandbox and AI Tutor. Students can first run and modify a working JavaScript example in the Sandbox, then use the Tutor to explain a line, diagnose a selector mismatch, or clarify what classList.toggle() is doing before they edit the project.

AI should support understanding, not replace it. If AI supplies code, students should still be able to point to the selected element, the click event, the class being changed, and the CSS rule that produces the visible result.

Applied Project

Students add one prescribed Show More interaction to an existing content section. Keeping the feature consistent across the class makes it possible to focus on how the code works rather than asking beginners to invent a JavaScript feature.

  1. Choose a section with a short piece of supporting content that can begin hidden.
  2. Add a <button type="button"> labeled Show More near that content.
  3. Add a clear class or ID to the extra content so JavaScript can select it.
  4. Add a CSS class that controls the visible state, while the default CSS keeps the extra content hidden.
  5. Create a new scripts.js file at the project root. The Base HTML already contains the script tag that loads this file.
  6. Add the provided click-handler pattern to scripts.js.
  7. Update the selector and class names so the JavaScript exactly matches the student’s HTML and CSS.
  8. Test the button several times and confirm that the content alternates between hidden and visible without reloading the page.

Do not add a second JavaScript feature during the required project work. The goal is to finish one small interaction that students can trace from the HTML button through the JavaScript and into the CSS result.

Check for Understanding

Students should be able to point to the HTML button, the content being changed, the JavaScript that responds to the click, and the CSS that controls the hidden and visible states.

Useful questions include:

  • What user action starts this interaction?
  • Which HTML element does JavaScript select?
  • What does classList.toggle() change?
  • Where is the appearance of the visible state defined?
  • What would happen if the selector in JavaScript did not match the HTML?
  • Why is the JavaScript file created in this lesson rather than included as a prewritten starter file?

Differentiation and Extensions

Support: Provide the complete working HTML, CSS, and JavaScript pattern. Have students first label which line selects the button, which line responds to the click, and which line changes the target class before adapting the names to their own page.

Extension: Have students change the button label between Show More and Show Less after the core interaction works. This should remain optional so the lesson does not become a second JavaScript assignment.

Lesson Outcome

Students finish the lesson with a new scripts.js file and one working Show More interaction integrated into the homepage. More importantly, they should be able to explain how the HTML control, JavaScript event, class change, and CSS state work together.

Closure

Review the three layers used in the interaction: HTML provides the control and content, CSS defines how the states appear, and JavaScript responds to the click and changes the class. Reinforce that understanding, modifying, and testing a useful code pattern is a professional skill even when the original syntax came from a lesson, documentation, or AI.

Preview that Lesson 11 will stop adding new interface features and turn back to the content already on the page, using search engine optimization principles to improve headings, metadata, links, alternative text, and relevance.

Teacher Reflection

  • Could students trace the interaction from the button click to the visible result?
  • Were students able to adapt selectors and class names without treating the JavaScript as unexplained code?
  • Did the Sandbox or AI Tutor help students understand and debug the pattern rather than simply supply an answer?
  • Are students ready to leave feature-building behind and focus on content relevance in Lesson 11?