Cacher is the code snippet organizer for pro developers

const toggleList = document.getElementById('toggleList');
const listDiv = document.getElementById('list');

toggleList.addEventListener('click', () => {
  if (listDiv.style.display === 'none') {
  toggleList.textContent = 'Hide list';
   listDiv.style.display = 'block';
}else {
  listDiv.style.display = 'none';
  toggleList.textContent = 'Show list';
}})

<!--HTML code: -->
<button id="toggleList">Hide list</button>
    <div id="list">
    <p class="description">Things that are purple:</p>
    <input type="text" class="description">
    <button class="description">Change list description</button>
    <ul>
      <li>grapes</li>
      <li>amethyst</li>
      <li>lavender</li>
      <li>plums</li>
    </ul>
      </div>