pjPNEj

index.html

<h1>Welcome to the Quiz!</h1>
<p>Click each question to get the answer.</p>

<div class="panel">
  <div class="question">What does HTML do?</div>
  <div class="answer">Hyper Text Markup Language makes stuff exist on the page</div>
</div>

<div class="panel">
  <div class="question">What does CSS do?</div>
  <div class="answer">Cascading Style Sheets make stuff look cool</div>
</div>

<div class="panel">
  <div class="question">What does JS do?</div>
  <div class="answer">JavaScript makes stuff on the page do stuff</div>
</div>

pjPNEj.markdown

pjPNEj

Forked from Captain Anonymous's Pen RWVGYQ.

A Pen by Joseph Bacal on CodePen.

License.

script.js

$('.panel').click(function(){
  $(this).children('.answer').slideToggle();
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  font-family:Menlo;
  text-align:center;
  background-color:#222;
  color:silver;
}

h1 {
  color:#2179E8;
}

div {
  padding:10px;
}

.answer {
  display:none;
  color:#FF5615;
}

.panel {
  width:70%;
  margin:10px auto;
  border:2px solid silver;
  border-radius:5px;
  box-shadow:2px 2px silver;
}

.panel:hover {
  background-color:#111;
  color:#2179E8;
}