Can text be hidden and shown using just CSS (no JavaScript code)? [closed]

Answer 1

There’s the

element, which isn’t yet built into Edge:

  
more 
  
Some content

I’m not sure how hard it is to style consistently across browsers.

There’s a common checkbox hack (where the checkbox can be hidden and the label can be styled to look like anything):

#more:not(:checked) ~ #content {
  display: none;
}

 more

Some content

but it’s not always (maybe ever? hmm) appropriate to use it; you can usually just fall back on showing the content when JavaScript fails to load, and have the “more” link link to it.

There’s also :target, but it’s probably even less appropriate, since it's harder to build in the closing mechanism.

#content {
  display: none;
}

#content:target {
  display: block;
}

#less {
  display: none;
}

#content:target ~ #less {
  display: block;
}

More
Lorem ipsum
Less