issue with hiding a Code block for a quiz

February 4, 2022

Currently I have a "quiz section" for my webpage. At the bottom of the information on the lesson there is a quiz.

Currently I have been able to show/hide standard text. But I want to know show a code block when I click "Show solution".
I have tried changing class names, but I can’t seem to get it right.

function show_hide(element)
        {
           var myAnswer = element.nextElementSibling;

           var displaySetting = myAnswer.style.display;

           var quizButton = element;

           if(displaySetting=="inline-block"){
               myAnswer.style.display = 'none';

               quizButton.innerHTML = 'Show Solution';
           }
           else
           {
               myAnswer.style.display = 'inline-block';
               quizButton.innerHTML = 'Hide Solution';
           }
        }

.quiz-question{
    margin-bottom: 10px;
    text-align: left;
    font-size: 15px;
    color: #f44336;
    font-weight: 400;
}
.quiz-button{
    display: inline-block;
    text-decoration: none;
    color: #111;
    border: 1px solid #f44336;
    padding: 5px 5px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}
.quiz-button:hover{
    color: #fff;
    background: #f44336;
    transition: 0.5s;
}
#answer{
    display: none;
}

<head>
    <script src="https://cdn.jsdelivr.net/gh/CDNSFree2/PrismJS@latest/prism.min.js"></script>
</head>
<body>
<!-- Working Code -->
    <h4 class="quiz-question">1. What is the difference between a statement and an expression?</h4>
    <button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
    <p id="answer">
        <b>Statements</b> are used when we want the program to perform an action. Expressions are used when 
        we want the program to calculate a value.
    </p>
    <br><br><hr>
<!-- Not Working Code -->
    <h4>C - Question</h4>
    <button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
    <p id="answer">
        <pre>
            <code class="language-cpp line-numbers">
                2                                //2 is a literal that evaluates to value 2
                "Hello World!"          //"Hello World!" is a literal that evaluates to text "Hello"
            </code>
        </pre>
    </p>
    
   

</body>

>Solution :

You have multiple error in this code:

id must be unique use class instead.
use <div> for contain <pre> instead of <p>

function show_hide(element) {
  const myAnswer = element.nextElementSibling;
  const displaySetting = myAnswer.style.display;
  if (displaySetting === "inline-block") {
    myAnswer.style.display = 'none';
    element.innerHTML = 'Show Solution';
  } else {
    myAnswer.style.display = 'inline-block';
    element.innerHTML = 'Hide Solution';
  }
}

.quiz-question {
  margin-bottom: 10px;
  text-align: left;
  font-size: 15px;
  color: #f44336;
  font-weight: 400;
}

.quiz-button {
  display: inline-block;
  text-decoration: none;
  color: #111;
  border: 1px solid #f44336;
  padding: 5px 5px;
  font-size: 13px;
  background: transparent;
  position: relative;
  cursor: pointer;
}

.quiz-button:hover {
  color: #fff;
  background: #f44336;
  transition: 0.5s;
}

.answer {
  display: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.26.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.jsdelivr.net/gh/CDNSFree2/PrismJS@latest/prism.min.js"></script>
<!-- Working Code -->
<h4 class="quiz-question">1. What is the difference between a statement and an expression?</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<p class="answer">
  <b>Statements</b> are used when we want the program to perform an action. Expressions are used when we want the program to calculate a value.
</p>
<br><br>
<hr>
<h4>C - Question</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<div class='answer'>
  <pre>
       <code class="language-cpp line-numbers">
                2                                //2 is a literal that evaluates to value 2
                "Hello World!"          //"Hello World!" is a literal that evaluates to text "Hello"
        </code>
  </pre>
</div>