На одной странице выводится, допустим, 10 товаров с краткими характеристиками. Каждый товар имеет видимую часть - описание и скрытую часть. Список товаров имеет следующую структуру:

<div class="cardboxmain">Основная информация о товаре</div>

<button type="button" title="Подробнее" class="buttondopinfo25 buttfalse">Подробнее</button>

<div id="dopinfo25 dopinfofalse">Скрытая информация о товаре</div>

</div>

-------------------------- Еще блоки товаров ----------------------------------------------

<div class="cardboxmain">Основная информация о товаре</div>

<button type="button" title="Подробнее" class="buttondopinfo13 buttfalse">Подробнее</button>

<div id="dopinfo13 dopinfofalse">Скрытая информация о товаре</div>

</div>

Что необходимо реализовать?

Под каждым блоком товара есть кнопка «Подробнее». При нажатии на эту кнопку, скрытая часть описания конкретного товара появляется (класс dopinfofalse меняется на dopinfoactive). Вид кнопки при этом тоже меняется (нужно менять класс buttfalse на buttactive). После повторного нажатия на кнопку вид блока и кнопки возвращаются в исходный вид. Каждый такой блок и каждая кнопка имеет свой уникальный id (например dopinfo25, где число 25 – код товара).

Если для реализации задачи нужно добавить еще какой-то html – не проблема. Может есть менее замороченный способ решения задачи, готов выслушать.

Ставки 10 Обсуждения 3