Попытка создать два 50% -ых стека в стеке в конфигурации push / pull "hideTop / showBoth / HideBottom"

Question

Решение макета, которое я пытаюсь реализовать, включает в себя упаковщик с центрированием 960px (W) x 100% (H).Внутри этой обертки два сложенных div (960px (W) x 50% (H), сложенных поверх еще 960px (W) x 50% (H)).Интерфейс, который я ищу, - это три различных вида, анимированные с помощью jquery.

1. (по умолчанию) Оба видимых элемента div
2. щелкните значок стрелки вниз, и для верхнего элемента увеличить его высоту до 99% оставляя 1% раскрытия (на котором есть значок стрелки вверх, чтобы переключиться обратно к представлению 50/50).
3. щелкните значок стрелки вверх, и нижний div увеличит его высоту до 99%, оставив раскрытие 1%и значок со стрелкой вниз, чтобы переключиться обратно к представлению 50/50.

Push и pull, два одинаково важных фрагмента контента, оба лучше видны на полной высоте экрана.

Answer 1

Это хорошее начало: http://jsfiddle.net/e2G6Y/.
Вам нужно изменить часть определения класса (if($(this).attr("class") == "equal")), если вы хотите, чтобы она работала с несколькими классами.
Вам также нужно будет добавить стрелки для повторного открытия по своему усмотрению.