Показать больше возможностей css

Вопрос:В настоящее время я работаю над приложением mpc asp.net и использую css3 для всех своих дисплеев. У меня есть текст на экране, и я хотел бы показать пользователю определенное количество его с возможностью щелчка по ссылке "показать больше". Итак, у меня был бы div с высотой набора, и нажатие на шоу больше показало бы остальную

Вопрос:

В настоящее время я работаю над приложением mpc asp.net и использую css3 для всех своих дисплеев.

У меня есть текст на экране, и я хотел бы показать пользователю определенное количество его с возможностью щелчка по ссылке “показать больше”.

Итак, у меня был бы div с высотой набора, и нажатие на шоу больше показало бы остальную часть контента.

Можно ли это сделать с помощью css исключительно?

Ответ №1

Вы можете использовать проверочный (или радио) вход для управления видимостью соседнего div. Вы также можете скрыть элементы ввода и управлять позиционированием ввода и т.п., Чтобы он отображался ниже содержимого.

<div class=»container»> <input id=»ch» type=»checkbox»> <label for=»ch»></label> <div class=»text»> your actual text goes here</div> </div> .text { height: 100px; overflow: hidden; } .container { position: relative; } label { position: absolute; top: 100%; } input { display: none; } label:after { content: «Show More»; } input:checked + label:after { content: «Show Less»; } input:checked ~ div { height: 100%; }

http://jsfiddle.net/ExplosionPIlls/6sj4e/

Ответ №2

Вам нужно будет сыграть с css, чтобы это выглядело правильно (чтобы показать больше, чтобы быть внизу), но решение будет выглядеть примерно так:

<a id=»showmore» href=»#»>Show More</a> <div id=»content»>lots of content</div>

CSS

<style> #content { height: 100px; overflow: hidden; } a#showmore:visited + #content { height: auto; overflow: visible} </style> Ответ №3

Вы можете использовать селектор :target.

HTML

<a id=»showmemore» href=»#contentofsite»>Show More</a> <div id=»contentofsite»> …… …… …… …… </div>

CSS

#contentofsite { height: 50px; overflow: hidden; } #showmemore + #contentofsite:target { height: auto; overflow: visible; }

http://jsfiddle.net/MfyPM/

Или вы можете использовать псевдо-класс :focus.

HTML

<a id=»showmemore» tabindex=»0″ href=»#»>Show More</a> <div id=»contentofsite»> …… …… …… …… </div>

CSS

#contentofsite { height: 50px; overflow: hidden; } #showmemore:focus + #contentofsite { height: auto; overflow: visible; }

http://jsfiddle.net/MfyPM/1/

Оцените статью
Добавить комментарий