Для начала нужно изучить несколько тем по вёрстке.
Помимо самой вёрстки: позиционирование, размеры, анимации, безопасные для производительности свойства анимации.
По js:
Поиск элементов в DOM, переключение атрибутов(в данном случае классов), обработчик событий(кликов).
может быть есть примеры реализации
Бесчисленное множество. Правила данного сервиса говорят Вам о том, что это первое что Вы должны были сделать прежде чем задать этот вопрос. Поискать в гугле\яндексе.
