<div class="container">
  <h1 class="nice-header">NICE FAQ <a href="http://bologer.ru/prostaya-faq-stranica-s-jquery-html-i-css/" class="sub">by Alexander Teshabaev</a></h1>
  <div class="faq">
    <ul class="faq-questions">
      <li>
        <h4 class="faq-question">Вопрос</h4>
        <p class="faq-answer">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
      </li>
      <li>
        <h4 class="faq-question">Вопрос длиннее </h4>
        <p class="faq-answer"><img src="http://thesweetsetup.com/wp-content/uploads/2013/11/CheckTheWeather512.png"></p>
      </li>
      <li>
        <h4 class="faq-question">Вопрос</h4>
        <p class="faq-answer">Ответ</p>
      </li>
      <li>
        <h4 class="faq-question">Вопрос которы может быть последним</h4>
        <p class="faq-answer">Ответ</p>
      </li>
    </ul>
  </div>
</div>
:after, :before, * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
  font-size: 11pt;
  text-align: left; 
  font-family: Verdana, Tahoma, sans-serif;
}

.container {
  width: 70%;
  margin: 50px auto;
  display: block; 
  

  .nice-header {
    text-align: center;
    font-size: 4.5em;
    margin-bottom: 20px; 
    font-weight: bold;
    color: #D8D8D8;
    position: relative; 
    
    .sub {
      color: #676767;
      position: absolute;
      top: -20px;
      right: 0;
      font-family: Georgia, serif;
      font-size: 13pt;
      font-weight: normal;
      font-style: italic;
      text-decoration: none; 
      
      &:hover { 
        text-decoration: underline;
        color: #000; 
      }
    }
    
  }
  .faq {
    width: 100%; 
    position: relative;

    // ul
    &-questions { 
      list-style: none; 

      &, & > li {
        width: 100%; 
        display: block;
        padding: 10px
      }

      & > li:nth-child(odd) {
        background-color: #E8E8E8;
      }

      & > li:nth-child(even) {
        background-color: #D8D8D8;
      }

      & > li {
        h4.faq-question, .faq-question {
          font-size: 12pt;
          font-weight: bold;
          color: #4E4E4E;
          cursor: pointer;
        }

        p.faq-answer, .faq-asnwer {
          font-size: 10pt; 
          line-height: 1.5;
          margin-top: 7px;
          display: none;

          &:hover {
            color: #000; 
          }
        }
      }
    }
  }
}
$(function() {
  var $speed = 200;
  var $class = 'opened';
  var $class_open = '.faq-answer';

  $(document).ready(function() {
    $('.faq-question').on('click', function() {
      $ul = $(this).closest('ul');
      $answer = $(this).closest('li').find($class_open);

      if (!$(this).closest('li').hasClass($class)) {

        $ul.find('li').each(function() {
          if ($(this).hasClass($class))
            $(this).removeClass($class).find($class_open).slideUp($speed);
        });
      }

      $answer
        .slideToggle($speed)
        .closest('li')
        .toggleClass($class);
    });
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js