Фолдинг при помощи CSS

Oct 26, 2010 16:56

Как всегда отсебятина...

Чего не хватает в livejournal ?
Фолдинга (это когда какой-то текст можно скрыть, и отображать без перезагрузки всей страницы. Естественно будет влиять на скорость загрузки, но если скрывать не стопиццот картинок, то все не так плохо :) )

Смотрим...

То, что нужно добавить в CSS:

div.invis{background:#402000;border-bottom: 1pt solid white; border-left: 1pt solid white; border-right: 1pt solid white; border-top: 1pt solid white;}
div.main a{outline:0;vertical-align:top}
a div, a:focus span{ display:none}
a:active span{visibility:hidden}
a:focus div, a:active div{display:block;width:500px}
a.hide{display:inline-block;width:70px;}
* html a.show{display:inline-block}
*+html a.show{display:inline-block}
Код в HTML:


+Показать

-Скрыть
Превед !!!
-Скрыть



Тестим :)

Ну собцтвенно писать тут особо нечего...


+Показать

-Скрыть

div.invis{background:#402000;border:1px solid #000000}
div.main a{outline:0;vertical-align:top}
a div, a:focus span{ display:none}
a:active span{visibility:hidden}
a:focus div, a:active div{display:block;width:500px}
a.hide{display:inline-block;width:70px;}
* html a.show{display:inline-block}
*+html a.show{display:inline-block}

-Скрыть



Идею спер у Мунлайта отсюда: http://berghowto.info/viewtopic.php?f=100&t=265
Previous post Next post
Up