JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<div id="content">
  <h2>Creating the scenario</h2>
  <p>sample text sample text. <br />
  </p>
  <p class="flip">[+] Code Hint #1</p>
  <div class="panel" style="line-height:1.5px;">
    <p>Some hint related to code segment</p>
  </div>
</div>
<br />
<br />
<div id="content">
  <h2>Adding the hero</h2>
  <p>sample text sample text. <br />
  </p>
  <p class="flip">[+] Code Hint #1</p>
  <div class="panel" style="line-height:1.5px;">
    <p>Some hint related to code segment</p>
  </div>
</div>
<br />
<br />
<div id="content">
  <h2>Moving with keyboard commands</h2>
  <p>sample text sample text. <br />
  </p>
  <p class="flip">[+] Code Hint #1</p>
  <div id="panel1" class="panel" style="line-height:1.5px;">
    <p>Some hint related to code segment</p>
  </div>
</div>

CSS

div.panel, p.flip {
margin: 0px;
padding: 5px;
text-align: center;
background: #333;
border: 1px solid #2C2C2C
}
div.panel {
display: none;
}

JavaScript

$(".flip").click(function() {
    $(this).next(".panel").slideToggle("slow");
});