<div class="accordionWrapper">
<div class="accordionItem open">
  <h2 class="accordionItemHeading">Здесь пишется заголовок<span>+</span></h2>

  <div class="accordionItemContent">
  <p>Далее идет описание, где можно также картинки выставить.</p>
  <p>Это продолжения описания, сто идет вторым трокой.</p>
  </div>
  </div>

  <div class="accordionItem close">
  <h2 class="accordionItemHeading">Второе название темы<span>+</span></h2>
  <div class="accordionItemContent">
  <p>Аккордеон JavaScript состоит из ряда расширяемых и сворачиваемых элементов.</p>
  <p>Одновременно отображается только один элемент.</p>

  </div>
  </div>

  <div class="accordionItem close">
  <h2 class="accordionItemHeading">Ключевое слово или фраза <span>+</span></h2>
  <div class="accordionItemContent">
  <p>Щелкните по заголовку элемента аккордеона, чтобы развернуть его. Чтобы свернуть элемент, щелкните по нему еще раз или выберите заголовок другого элемента.</p>
  </div>
  </div>
</div>

.accordionWrapper{
  padding:30px;
  background:#fff;
  float:left;
  width:500px;
  border-radius: 5px;
  box-sizing:border-box;
  margin:30px;
  margin-left:100px;
  box-shadow: 0 1.5em 85px 0 rgba(0, 0, 0, 0.2);}

.accordionItem{
  float:left;
  display:block;
  width:100%;
  box-sizing: border-box;
  font-family:'Open-sans',Arial,sans-serif;
}
.accordionItemHeading{
  cursor:pointer;
  margin:0px 0px 10px 0px;
  padding:10px;
  font-size: 22px;
  font-weight: 400;
  background:#2980b9;
  color:#fff;
  width:100%;

border-radius: 3px;
  box-sizing: border-box;
}
.accordionItemHeading span{
  float: right;
  font-size: 25px;
}
.close .accordionItemContent{
  height:0px;
  transition:height 1s ease-out;

  transform: scaleY(0);
  float:left;
  display:block;

}
.open .accordionItemContent{
  padding: 20px;
  background-color: #f0f1f1;
  border: 1px solid #ddd;
  width: 100%;

  margin: 0px 0px 10px 0px;
  display:block;

  transform: scaleY(1);

  transform-origin: top;

  transition: transform 0.4s ease;
  box-sizing: border-box;
}

.open .accordionItemHeading{
  margin:0px;

  border-top-left-radius: 3px;
  border-top-right-radius: 3px;

  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  background-color: #073e63;
  color: #cdd7d8;
}