// for skillcrush class - hoping to learn how to nest dom events

skillcrushpotterstuck.css

#potter-info {
  display: none;
  color: maroon;
}
#yedson-info {
  display: none;
  color: navy;
}
#hunter-info {
  display: none;
  color: forestgreen;
}
p.announcement {
  font-weight: bold;
}
h2 {
  font-size: 25px;
}

h2#gryffindor {
  color: red;
}
h2#ravenclaw {
  color: blue;
}
h2#slytherin {
  color: green;
}

skillcrushpotterstuck.html

<style id="jsbin-css">
#potter-info {
  display: none;
  color: maroon;
}
#yedson-info {
  display: none;
  color: navy;
}
#hunter-info {
  display: none;
  color: forestgreen;
}
p.announcement {
  font-weight: bold;
}
h2 {
  font-size: 25px;
}

h2#gryffindor {
  color: red;
}
h2#ravenclaw {
  color: blue;
}
h2#slytherin {
  color: green;
}
</style>
<h1>==&gt; ?: Be Named and Sorted.</h1>
<div id="sprites">
  <img src="http://img3.wikia.nocookie.net/__cb20131118195928/fandomstuck/images/7/7f/Tumblr_mkgh3oRLqc1qk555oo2_r1_400.png" id="harry-potter" />
  <img src="http://fc05.deviantart.net/fs71/f/2012/302/c/4/homestuck_fantroll__proesa_talima_by_karisohma22-d5j9r4o.png" id="ainstein-yedson" />
 <img src="http://fc03.deviantart.net/fs70/f/2012/226/a/4/homestuck_fan_troll_by_zelly_fangirl-d5b49xm.jpg" id="transience-hunter" />
</div>
<div id="characters">
<div id="potter-info">
<p>Your name is HARRY POTTER, sometimes known as THE BOY WHO LIVED, though you DO NOT REMEMBER WHY. You were not aware of your MAGICAL PROVENANCE until suddenly visited on by a GENTLE GIANT on your ELEVENTH BIRTHDAY. Your only souvenier of the experience was a GNARLY LIGHTNING SCAR, which still GIVES YOU HEADACHES sometimes.</p>
  <p>The SORTING HAT argues with you over your supposed house, wanting desperately to put you in SLYTHERIN despite your PROTESTS. You have been told that the SLYTHERINS were all BAD NEWS and did not want to be one, especially since the wizard who GAVE YOU YOUR SCAR (and also happened to have KILLED YOUR PARENTS) was possibly from Slytherin. Too much trauma.</p>
  <p class="announcement">[[After some back-and-forth, the Hat places you in...]]</p>
  <h2 id="gryffindor">GRYFFINDOR!</h2></div>
<div id="yedson-info">
  <p>Your name is AIN'STEIN YEDSON and you come from what these weird new people call the MUGGLE WORLD. You were raised by a NUCLEAR PHYSICIST and a SCIENCE-FICTION WRITER, whose only superstition was in the MAGIC OF NAMES - thus naming you after THEIR ULTIMATE HEROES. When you received the HOGWARTS LETTER you and your family assumed it was a SIMPLE PRANK, because magic BREAKS THE LAWS OF PHYSICS; when the HOGWARTS REPRESENTATIVE came to visit your home and give a demonstration, you were STILL NOT CONVINCED.</p>
    <p>Somehow you still came to HOGWARTS, treating this as a SCIENTIFIC AND ANTROPOLOGICAL EXPERIMENT (even though you did not SUBMIT YOUR STUDY TO ETHICS BOARDS.) The SORTING HAT does not take a long time to figure out where you should be housed, but whispers after the announcement to NOT CONFUSE INTELLIGENCE WITH WISDOM.</p>
  <p class="announcement">[[The Hat places you in...]]</p>
     <h2 id="ravenclaw">RAVENCLAW!</h2></div>
  <div id="hunter-info">
    <p>Your name is TRANSIENCE U. HUNTER. You are considered a PUREBLOOD since you come from WIZARDING PARENTS. Not that you CARE about them particularly, since you HATE TO BE DEFINED by YOUR RELATIVES. You think that would be RELYING ON LUCK and would rather MAKE A NAME FOR YOURSELF. This is difficult, however, since your parents are FAMOUS EXPLORERS with enough wealth to MAKE UP THE ONE PERCENT - if the idea of the 1% ACTUALLY MADE SENSE IN THE WIZARDING WORLD.</p>
    <p>The SORTING HAT deliberates over you carefully. They seem CERTAIN of their answer, but also notice that you are A LOT MORE QUIET - and therefore possibly A LOT MORE DANGEROUS - than the rest of the people that have been sorted into YOUR HOUSE. Maybe you should have gone with THAT POTTER BOY.</p>
    <p>You DO NOT SAY A THING. You get a lot more accomplished if you KEEP YOUR MOUTH SHUT amd GO STEALTH.</p>
    <p class="announcement">[[You swear the Hat is winking at you when he announces...]]</p>
    <h2 id="slytherin">SLYTHERIN!</h2></div>
</div>
<script id="jsbin-javascript">
var harryPotter = document.getElementById('harry-potter');
harryPotter.addEventListener('click', harryPotterName, false);
harryPotter.addEventListener('dblclick', harryPotterDone, false);

var ainsteinYedson = document.getElementById('ainstein-yedson');
ainsteinYedson.addEventListener('click', ainsteinYedsonName, false);
ainsteinYedson.addEventListener('dblclick', ainsteinYedsonDone, false);

var transienceHunter = document.getElementById('transience-hunter');
transienceHunter.addEventListener('click', transienceHunterName, false);
transienceHunter.addEventListener('dblclick', transienceHunterDone, false);

var announcement = document.getElementByClass('announcement');
announcement.addEventListener('click', announcementSort, false);

function announcementSort() {
  var info = document.getElementById('announcement');
  info.style.display = 'block';
}

function harryPotterName() {
  var info = document.getElementById('potter-info');
  info.style.display = 'block';
}
function harryPotterDone() {
  var info = document.getElementById('potter-info');
  info.style.display = 'none';
}

function ainsteinYedsonName() {
  var info = document.getElementById('yedson-info');
  info.style.display = 'block';
}
function ainsteinYedsonDone() {
  var info = document.getElementById('yedson-info');
  info.style.display = 'none';
}

function transienceHunterName() {
  var info = document.getElementById('hunter-info');
  info.style.display = 'block';
}
function transienceHunterDone() {
  var info = document.getElementById('hunter-info');
  info.style.display = 'none';
}
</script>

<script id="jsbin-source-css" type="text/css">#potter-info {
  display: none;
  color: maroon;
}
#yedson-info {
  display: none;
  color: navy;
}
#hunter-info {
  display: none;
  color: forestgreen;
}
p.announcement {
  font-weight: bold;
}
h2 {
  font-size: 25px;
}

h2#gryffindor {
  color: red;
}
h2#ravenclaw {
  color: blue;
}
h2#slytherin {
  color: green;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var harryPotter = document.getElementById('harry-potter');
harryPotter.addEventListener('click', harryPotterName, false);
harryPotter.addEventListener('dblclick', harryPotterDone, false);

var ainsteinYedson = document.getElementById('ainstein-yedson');
ainsteinYedson.addEventListener('click', ainsteinYedsonName, false);
ainsteinYedson.addEventListener('dblclick', ainsteinYedsonDone, false);

var transienceHunter = document.getElementById('transience-hunter');
transienceHunter.addEventListener('click', transienceHunterName, false);
transienceHunter.addEventListener('dblclick', transienceHunterDone, false);

var announcement = document.getElementByClass('announcement');
announcement.addEventListener('click', announcementSort, false);

function announcementSort() {
  var info = document.getElementById('announcement');
  info.style.display = 'block';
}

function harryPotterName() {
  var info = document.getElementById('potter-info');
  info.style.display = 'block';
}
function harryPotterDone() {
  var info = document.getElementById('potter-info');
  info.style.display = 'none';
}

function ainsteinYedsonName() {
  var info = document.getElementById('yedson-info');
  info.style.display = 'block';
}
function ainsteinYedsonDone() {
  var info = document.getElementById('yedson-info');
  info.style.display = 'none';
}

function transienceHunterName() {
  var info = document.getElementById('hunter-info');
  info.style.display = 'block';
}
function transienceHunterDone() {
  var info = document.getElementById('hunter-info');
  info.style.display = 'none';
}

</script>

skillcrushpotterstuck.js

var harryPotter = document.getElementById('harry-potter');
harryPotter.addEventListener('click', harryPotterName, false);
harryPotter.addEventListener('dblclick', harryPotterDone, false);

var ainsteinYedson = document.getElementById('ainstein-yedson');
ainsteinYedson.addEventListener('click', ainsteinYedsonName, false);
ainsteinYedson.addEventListener('dblclick', ainsteinYedsonDone, false);

var transienceHunter = document.getElementById('transience-hunter');
transienceHunter.addEventListener('click', transienceHunterName, false);
transienceHunter.addEventListener('dblclick', transienceHunterDone, false);

var announcement = document.getElementByClass('announcement');
announcement.addEventListener('click', announcementSort, false);

function announcementSort() {
  var info = document.getElementById('announcement');
  info.style.display = 'block';
}

function harryPotterName() {
  var info = document.getElementById('potter-info');
  info.style.display = 'block';
}
function harryPotterDone() {
  var info = document.getElementById('potter-info');
  info.style.display = 'none';
}

function ainsteinYedsonName() {
  var info = document.getElementById('yedson-info');
  info.style.display = 'block';
}
function ainsteinYedsonDone() {
  var info = document.getElementById('yedson-info');
  info.style.display = 'none';
}

function transienceHunterName() {
  var info = document.getElementById('hunter-info');
  info.style.display = 'block';
}
function transienceHunterDone() {
  var info = document.getElementById('hunter-info');
  info.style.display = 'none';
}