<h1>Let's play solitaire!</h1>
<main>
  <button class="rules-btn">Show Rules</button>
  <section class="rules-container">
    <h2>Rules to the game</h2>
    <ul>
      <li>There are 7 columns of cards</li>
      <li>First column has 1 card, second has 2, third has 3, and so on</li>
      <li>First card in each column is face up, rest are face down</li>
      <li>Move cards to build 4 stacks of cards in ascending order</li>
      <li>Start with aces and build up to kings</li>
      <li>Move cards by dragging and dropping</li>
    </ul>
  </section>
</main>
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
}

h2 {
  margin-top: 25px;
}

.rules-container {
  display: none;
}

.rules-container.show {
  display: block;
  font-size: 1.2rem;
  width: 50%;
  margin: 10px auto;
}

.rules-btn {
  font-size: 1.2rem;
  color: #fff;
  background-color: #8a2be2;
  border: none;
  border-radius: 15px;
  padding: 10px;
  cursor: pointer;
  display: block;
  margin: 10px auto;
}

.rules-btn:hover {
  background-color: #5a1d94;
}
const rulesBtn = document.querySelector(".rules-btn");
const rulesContainer = document.querySelector(".rules-container");

rulesBtn.addEventListener("click", () => {
  rulesContainer.classList.toggle("show");
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.