JSFiddle - React, Tailwind, and code Playground

HTML

<div id="questions">
  <button id="toggle">
    Show all answers
  </button>
  <p>This is question 1.</p>

  <img src="http://cliparts.co/cliparts/qTB/5yd/qTB5ydpzc.gif" alt="show answer" height="42" width="42">

  <p id="1" class="answer">This answer1.</p>

  <p>This is question 2.</p>

  <img src="http://cliparts.co/cliparts/qTB/5yd/qTB5ydpzc.gif" alt="show answer" height="42" width="42">

  <p id="2" class="answer">This answer2.</p>


</div>

CSS

#questions .answer {
  display: none;
}

#questions.show-all .answer {
  display: block;
}

JavaScript

var questions = document.getElementById('questions');
var toggle = document.getElementById('toggle');

function toggleAll() {
  if (questions.classList.contains('show-all')) {
    questions.classList.remove('show-all');
    toggle.innerText = 'Show all answers';
  } else {
    questions.classList.add('show-all');
    toggle.innerText = 'Hide all answers';
  }
}

toggle.onclick = toggleAll;