Michael Florian Michael Florian - 1 month ago 5
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

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.
Comments