Сделать разворачивающуюся таблицу для сайта

Кирилл10 лет в сервисе
Данные заказчика будут вам доступны после подачи заявки
06.11.2015

Есть сайт. Для него нужно написать табличку, которая будет встроена на страницу http://rentofequipment.com/main/ НАД ГЛОБУСОМ. Первоначально, при загрузке сайта, таблица свернута, в виде одной полоcы (изображение 1), на которую нужно кликать, чтобы она развернулась (изображение 2).

В таблице есть заголовки с различными параметрами для заказа оборудования - они в темно-серых ячейках НЕКЛИКАБЕЛЬНЫ. Все остальные ячейки таблицы - КЛИКАБЕЛЬНЫ: это параметры оборудования, их можно выбрать сколько угодно. При клике их оттенок должен слегка затемняться, чтобы было видно, что они выбраны.

Также вверху нужно обязательно ввести email и номер телефона и после нажатия кнопки SEND, выбранные параметры таблицы, а также, введенный email и номер телефона уходят на почту [email protected]

Если кликнуть на полосу IMG снова, таблица свернется обратно со всеми выбранными параметрами, если они еще не были отправлены.

Нужно сделать одну таблицу а потом ее скопипастить и изменить содержимое ячеек на русский язык. Таким образом на выходе получится две одинаковых таблицы: русская (изображение 3) и английская. (т.к. 2 одинаковых сайта - один в зоне ru, другой в зоне com)

Чтобы было удобнее делать, при необходимости сразу дам доступ на FTP и в админку (сайт на WordPress).

Таблицу я рисовал в фотошопе, поэтому если нужно, скину исходники.

Предложите варианты на чем все это дело можно написать чтобы на сайт все встало легко и не грузило его сильно.

PS когда таблица разворачивается то 3dглобус, который под ней., сдвигается вниз под таблицу.

Заявки фрилансеров