Добрый день. Три дня пытаюсь найти ответ в интернете, но безуспешно. Есть примерно такая верстка, которая должна работать как аккордион:
<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>
По клику на
li.accordion-item должен раскрываться
div.content текущего элемента и скрываться
div.content остальных
li.accordion-item. Но по этому же клику должны становиться видимыми
span.hidden и скрываться
span.show кликнутого
li.accordion-item, а внутри других
li.accordion-item'ов
span.hidden'ы/
span.show'ы должны скрываться/показываться.
"Аккордион" сделал (не знаю, хорошо ли это, но оно работает) вот так:
$("li.accordion-item").click(function() {
$(this).find(".content").slideToggle("fast");
$(".content").not($(this).children()).slideUp('fast');
});
Не знаю, как показывать/скрывать по клику span'ы. Подскажите, пожалуйста.
