Вопрос:
В настоящее время я работаю над приложением 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; }
Или вы можете использовать псевдо-класс :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; }