title: Onclick show/hide - Javascript
body: <p>I'm working a very simple program that show the solution of the problem when the user click on the solution link. I'm trying to do this without using jQuery.</p>
  
  <p>So the first thing that I did was to add a click to my <code>p</code>. But now I'm lost and I don't know how to display the solution.</p>
  
  <p>Any ideas on how to fix this problem?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var solutionLink = document.querySelectorAll("p.solutionLink");
  
  function openSolution(){
    document.getElementsByClassName('.solution').nextSibling.style.display = "block";
  }
  
  for(var i=0; i&lt; solutionLink.length; i++){
    var solutions = solutionLink[i];
    solutions.addEventListener('click', openSolution, false);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.solutions {display:none;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;This problem #1&lt;/p&gt;
  
  &lt;p class="solutionLink"&gt;Click here to see solution&lt;/p&gt;
  
  &lt;div class="solutions"&gt;
    This is the solution to problem #1
  &lt;/div&gt;
  
  &lt;p&gt;This problem #2&lt;/p&gt;
  
  &lt;p class="solutionLink"&gt;Click here to see solution&lt;/p&gt;
  
  &lt;div class="solutions"&gt;
    This is the solution to problem #2
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>