How to show/hide elements in accordion headers?

Question

JavaScript

Good afternoon. I've been trying to find an answer on the Internet for three days, but without success. There is something like this layout, which should work like an accordion:

<ul>
<li class="accordion-item">
   <div class="header">
      <h3>Accordion header</h3>
      <span class="show">Минимальная цена</span>
      <span class="hidden">Какая-то информация о продавце</span>
   </div>
   <div class="content">
      Цена 1
      Цена 2
      Цена 3
   </div>
</li>
<li class="accordion-item">
   <div class="header">
      <h3>Accordion header</h3>
      <span class="show">Минимальная цена</span>
      <span class="hidden">Какая-то информация о продавце</span>
   </div>
   <div class="content">
      Цена 1
      Цена 2
      Цена 3
   </div>
</li>
<li class="accordion-item">
   <div class="header">
      <h3>Accordion header</h3>
      <span class="show">Минимальная цена</span>
      <span class="hidden">Какая-то информация о продавце</span>
   </div>
   <div class="content">
      Цена 1
      Цена 2
      Цена 3
   </div>
</li>
</ul>

Clicking on a li.accordion-item should expand the div.content of the current element and hide the div.content of the rest of the li.accordion-item . But on the same click, the span.hidden should become visible and the span.show of the clicked li.accordion-item should be hidden , and within other li.accordion-item 's span.hidden 's/ span.show 's should be hidden/showed.

"Accordion" did (I don't know if it's good, but it works) like this:

$("li.accordion-item").click(function() {
      $(this).find(".content").slideToggle("fast");
      $(".content").not($(this).children()).slideUp('fast');
});

I don't know how to show/hide spans on click. Tell me please.

Answer 1

and inside other li.accordion-items, span.hiddens/span.shows should be hidden/showed.

Judging by this phrase, the author understood exactly this behavior.
jsfiddle.net/dq714Lfn/3