<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");
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.