Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Accordion project template from

Project Details

Write a script that can be used to convert a collection of headings and content into a show/hide accordion.


  • How will sighted users know that collapse content can be expanded?
  • Users who navigate with a keyboard should be able to expand and collapse content without using a mouse.

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 class="accordion">
<div><p>Prow clipper capstan grog poop deck. Hands man-of-war interloper measured fer yer chains no prey, no pay. Spanish Main dead men tell no tales hands spirits Pieces of Eight.</p></div>
<div><p>Yard blow the man down execution dock broadside barque. Pressgang bilge hang the jib Spanish Main driver. Belay red ensign cutlass chantey trysail.</p></div>
<h2>Pirate Draft</h2>
<div><p>Main sheet gunwalls tender Admiral of the Black Cat o'nine tails. Bring a spring upon her cable parrel gangplank pirate draft. Rutters bilge rat driver ballast swing the lead.</p></div>
// Project code...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment