CodePen Embed - JjJzRdV

<head>
  <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
</head>
<div class="exo1">
        <p class="content">Classlist.toggle :</p>
        <p>Instructions exercice !</p>
        <ul>
            <li>Lorem, ipsum dolort officia!</li>
            <li>Lorem, ipsum dolort officia!</li>
            <li>Lorem, ipsum dolort officia!</li>
            <li>Lorem, ipsum dolort officia!</li>
            <li>Lorem, ipsum dolort officia!</li>
        </ul>
      <button id="button">CLICK</button>
    </div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Montserrat';
    background-color: white;
    text-align: center;
}
.exo1 {
    background-color: #FEEDE6;
    display: inline-block;
    max-width: auto;
    vertical-align: top;
    padding: 30px 200px;
    margin-top: 50px;
    border-radius: 10px;
}

ul {
    list-style: none;
    margin:10px 0;
}

ul.click{
    display: none;
}

button {
    background-color: #4C35E0; 
    border: none;
    color: white;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 0px;
    cursor: pointer;
    border-radius: 10px;
}

button:hover {
    opacity: 0.8;
}

.content {
    font-weight: bold;
    margin-bottom: 20px;
}

let button = document.querySelector('button');
let tableau = document.querySelector('ul');
console.log(button)

button.addEventListener("click", function(){
    tableau.classList.toggle("click");
})

This Pen is owned by Romain Malaterre on CodePen.

See more by @romain-malaterre on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.