Mostrar / ocultar contenido

(THIS)

by Raúl Rojas

HTML

<!-- HTML -->
<p>Pregunta 1...
  <a href="#" class="alternar-respuesta">ver respuesta</a>
</p>
<p class="respuesta">Respuesta 1...</p>

<p>Pregunta 2...
  <a href="#" class="alternar-respuesta">ver respuesta</a>
</p>
<p class="respuesta">Respuesta 2...</p>

<p>Pregunta 3... <a href="#" class="alternar-respuesta">ver respuesta</a>
</p>
<p class="respuesta">Respuesta 3...</p>

<a href="#" id="alternar-todo">
  Ver respuesta
</a>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

CSS

.respuesta {
  display: none;
}

JavaScript

// jQuery
$(document).ready(function () {
  $('.alternar-respuesta').on('click', function (e) {
    $(this).parent().next().toggle('slow');
    e.preventDefault();
  });
  $('#alternar-todo').toggle(
    // Primer click
    function (e) {
      $('.respuesta').slideDown();
      $(this).text('Ocultar respuesta');
      e.preventDefault();
    }, // Separamos las dos funciones con una coma
    // Segundo click
    function (e) {
      $('.respuesta').slideUp();
      $(this).text('Ver respuesta');
      e.preventDefault();
    }
  );
});