Как сделать раскрывающийся при нажатии блок?

Question

[Алексей Смирнов]

Привет!
Есть вот такая вещь:
jsfiddle.net/ERAFY/sRRf7/5/
При наведении курсором мыши на красную область она приподнимается и показывает зеленую область.

Мне нужно, чтобы красная область приподнималась не от наведения курсора мыши, а при щелчке мышкой по красной области. Причем (щелчком) не по всей красной области, а только по нижней её части высотой (к примеру) 50px.

Далее блок должен находиться в открытом состоянии, ожидая следующего щелчка.

А закрытие (т.е. опущение красной области вниз) должно осуществляться щелчком мыши по любой области (красной и белой в данном случае) кроме зеленой (т.к. в зеленой области будут располагаться ссылки - но это сейчас не важно).

Хотелось бы реализацию на CSS (но не обязательно).

Answer 1

[Александр Хиренко]

Как-то так:
jsfiddle.net/sRRf7/8

Comments

[Алексей Смирнов]

@Satanpit Вот это мне нравиться. А можно еще чтобы закрытие происходило щелчком не только по красной области, но и по белой?

[Александр Хиренко]

@ERAFY jsfiddle.net/sRRf7/10 вот пример.
Закрытие будет происходить в пустой области .grid

[krlljs]

@Satanpit круто. А с моим вопросом помочь сможешь?

[Александр Хиренко]

@krlljs дак Вы же ярый противник jQuery :)

[krlljs]

@Satanpit я не противник, я прагматик. «То, во что для нас лучше верить — истинно», — утверждал основатель прагматизма У. Джемс[2].

[Александр Хиренко]

@krlljs прагматизм подразумевает практическое использование. jQuery тоже можно использовать довольно практично :)

[krlljs]

@Satanpit да, но зачем копать маленькую ямку бульдозером, когда существует лопата? jQuery хорошая библиотека, не исключаю что использовать буду в проекте своем. Но есть ведь еще другие, такие как: Zepto, Yui и т.д.

[krlljs]

@Satanpit Мне нравится ребята из Yooho, она придумали свой JQuery. Это как свое казино, со своими шлюхами и блекджеком.. Стремлюсь создать свой фреймворк*, пока что только у себя в голове.

*-фреймворк, -это то что избавляет от рутинных дел

[krlljs]

@krlljs я про Yui и их фреймворк purecss.io

[krlljs]

@krlljs поверх него хочу дописать свои стили своего оформления, и использовать в дальнейшем. оформить в пакетном менеджере bower.io, и потом постепенно дорабатывая булдить

[krlljs]

@Satanpit почему используешь jsfiddle.net?

[Александр Хиренко]

@krlljs ну по поводу библиотек, jQuery отлично себя проявила, есть решение большинства задач, много плагинов да и удобно наконец.
На счет бульдозера полностью согласен, если это Ваша единственная задача - сделать анимацию, то смысла в ней нет.
По поводу фреймворков, jQuery это не фреймворк, а библиотека (утилита, если хотите), фреймовк это AngularJS и ему подобные.

jsfiddle использую потому что использую :) объективных причин нет, как-то раз попался под руку и все.

[krlljs]

@Satanpit cssdeck.com/labs/cq9o9xe5 я тебе послание сделал. переходим на cssdeck.com/labs ?

[krlljs]

@Satanpit я знаю что библиотека с доступный API, я говорил про purecss.io, да и к тому же я пометил в каком понятии слово "фреймворк" я использую... холивар устраивать не хочу, но только если не узнаю что то новое или полезное :))

backbone кстати тоже библиотека, но angular это фреймворк... знаешь почему? ;)))

[Александр Хиренко]

@krlljs не плохо, только с выбором библиотек у них какой-то баг

[krlljs]

@krlljs у кого баг? увидел мое послание? cssdeck.com/labs/cq9o9xe5

[Александр Хиренко]

@krlljs cssdeck.com/labs баг при выборе библиотеки. Да, увидел, круто :)

[krlljs]

@Satanpit тогда пора свой cssdeck.com/labs и jsfiddle.net пилить. ты так не думаешь?

[krlljs]

@Satanpit используешь gruntjs | gulpjs???

Answer 2

[Александр]

вместо :hover использовать :active?

Comments

[Алексей Смирнов]

@shendel В этом случае блок будет раскрытым пока удерживаешь клавишу мышки нажатой.
А мне необходимо чтобы блок ожидал повторного щелчка мыши.

[Александр]

без js наверное никак jsfiddle.net/NDDy4

[Алексей Смирнов]

@shendel Почти, не все условия выполняются.