title: Show and hide text on html using javascript
body: <p>javascript:</p>
  
  <pre><code>function mostrar(order) {
  switch (order) {
      case 0:
          $(".hide").removeClass("show");
          $(".mostrar1").addClass("show");
          break;
      case 1:
          $(".hide").removeClass("show");
          $(".mostrar2").addClass("show");
          break;
      case 2:
          $(".hide").removeClass("show");
          $(".mostrar3").addClass("show");
          break;
      case 3:
          $(".hide").removeClass("show");
          $(".mostrar4").addClass("show");
          break;
  }
  }
  </code></pre>
  
  <p>html: </p>
  
  <pre><code>&lt;a href="" onclick="mostrar(0);"&gt;Leer más&lt;/a&gt;
  &lt;a href="" onclick="mostrar(1);"&gt;Leer más&lt;/a&gt;
  &lt;a href="" onclick="mostrar(2);"&gt;Leer más&lt;/a&gt;
  &lt;a href="" onclick="mostrar(3);"&gt;Leer más&lt;/a&gt;
  &lt;div class="hide mostrar1"&gt;asd1&lt;/div&gt;
  &lt;div class="hide mostrar2"&gt;asd2&lt;/div&gt;
  &lt;div class="hide mostrar3"&gt;asd3&lt;/div&gt;
  &lt;div class="hide mostrar4"&gt;asd4&lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.hide { display: none;}
  .show { display:block!important}
  </code></pre>
  
  <p><a href="http://jsfiddle.net/dn69d14L/" rel="nofollow">http://jsfiddle.net/dn69d14L/</a></p>
  
  <p>I´m only trying to show and hide the text.</p>
  
  <p>Can someone explain me why is this not working?</p>