Instantly share code, notes, and snippets.

@cferdinandi cferdinandi/README.md
Last active Jan 16, 2019

Embed
What would you like to do?
Accordion project template from https://learnvanillajs.com.

Project Details

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

Considerations

  • 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>
<html>
<head>
<title>Project Template</title>
<style type="text/css">
body {
margin-left: auto;
margin-right: auto;
max-width: 40em;
width: 88%;
}
</style>
</head>
<body>
<h1>Accordion</h1>
<div class="accordion">
<h2>Man-of-War</h2>
<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>
<h2>Cutlass</h2>
<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>
</div>
<script>
// Project code...
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment