Michael Florian Michael Florian - 1 year ago 63
CSS Question

How to create rolldown content with css?

how can i create rool down content with CSS?

TEXT

INFOINFOINFO
INFOINFOINFO


the TEXT will be always seen but the INFO will show when the pointer click on TEXT.

Answer Source

You can use a pure CSS solution using CSS property content.

If you are interested to know more about content you can read this useful article.

.txt span{
  display:none;
}
.txt:hover:after {
  display:block;
  content:'info info info';
}
<p class="txt">text<p>

Or you can use a more "classic" approach, where instead you show hide a span tag:

.txt span {
  display: none;
}

.txt:hover span {
  display: block;
}
<p class="txt">text<span>some information</span><p>


Pro and Cons IMO:

First approach:

  • You can keep your HTML cleaner.
  • Info text won't be visible to Search Engines (could be a PRO or CON it depends of your use case).
  • IE < 8 do not support content property.

Second approach:

  • You can keep your "information" in the HTML.
  • Info will be visible to Search Engines.