title: Javascript hide/show with many elements
body: <p>in my HTML i have questions and solutions. I want to hide and show solutions for each question with different buttons. </p>
  
  <p>Here is my problem: I am writing a new function for each solution button. For example if i have 100 questions then i need to write 100 different Javascript function.</p>
  
  <p>Is there any better way for doing this. Can i write only one function for each solution button. </p>
  
  <p>Thank you very much in advance.</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;li&gt;Question 1. What is x?&lt;/li&gt;
  &lt;button class="btn btn-outline-success" 
  onclick="myFunction()"&gt;Solution&lt;/button&gt;
  &lt;div id="Solution"&gt;
  &lt;div class="highlight"&gt;
  &lt;pre&gt;
  X is apple
  &lt;/pre&gt;
  
  &lt;li&gt;Question 2. What is y?&lt;/li&gt;
  &lt;button class="btn btn-outline-success" 
  onclick="myFunction1()"&gt;Solution&lt;/button&gt;
  &lt;div id="Solution1"&gt;
  &lt;div class="highlight"&gt;
  &lt;pre&gt;
  Y is orange
  &lt;/pre&gt;
  </code></pre>
  
  <p>And here is my Javascript:</p>
  
  <pre><code>document.getElementById( 'Solution' ).style.display = 'none';
  
  function myFunction() {
      var x = document.getElementById('Solution');
      if (x.style.display === 'none') {
          x.style.display = 'block';
      } else {
          x.style.display = 'none';
      }
  }
  
  document.getElementById( 'Solution1' ).style.display = 'none';
  
  function myFunction1() {
      var x = document.getElementById('Solution1');
      if (x.style.display === 'none') {
          x.style.display = 'block';
      } else {
          x.style.display = 'none';
      }
  }
  </code></pre>
  
  <p>Note:I saw many questions about hide and show but i could not solve my problem. If this is a duplicate question please warn me and i can remove.</p>