Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Show-and-hide project template from

Project Details

Write a script that can be used to show/hide content (like the #pirate-speak element in the template) when users click a button.


  • Should the button be part of the initial markup, or created with JavaScript?
  • How would someone using a screen reader know what content goes with the button?

Need help?

This project is part of the DOM Manipulation pocket guide and video course.

<!DOCTYPE html>
<title>Project Template</title>
<style type="text/css">
body {
margin-left: auto;
margin-right: auto;
max-width: 40em;
width: 88%;
<div id="pirate-speak">
Hands Letter of Marque chantey man-of-war spanker. Barbary Coast take a caulk rutters cog line. Splice the main brace chantey port parrel careen.
// Project code...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment