show/hide fading text css only

Question

I’d like to show/hide part of a paragraph as follows:

1. Starts out looking like this:

   ► This is the start of the paragraph with fading text

2. Upon clicking “caret” on left, it looks like this:

   ▼ This is the start of the paragraph with fading text no longer fading and the rest of the content shown.

3. Upon clicking the down “caret”, it returns to:

   ► This is the start of the paragraph with fading text

As I think about this could something like this work?

<div class="partial-text"><a href="">&#9658; This is the start of the paragraph with <style=”fadingCSS”> fading text</style></a></div>

<div class="full-text"><a href="">&#x25BC; This is the start of the paragraph with fading text no longer fading and the rest of the content shown.</a></div>

CSS I Need Help With

1. Show/Hide appropriate div
2. Remove all link formatting
3. Fading style CSS

I’ve look at the following but can’t piece it together:

• How to style the arrow of <details> <summary> elements?
• Fading out text on overflow with css if the text is bigger than allowed

This is sort of beyond my reach so if there is anyone willing to help, it would be greatly appreciated!

Answer 1

The <details> tag is not a structural HTML element, so I don't think it's really possible to hack what you want with it.

Here's an implementation using checkboxes and sibling selectors, one (of the many) downsides to this is that you'll have to define both your summary and full paragraph. This or similar CSS only applications are not really something I'd recommend doing, though. They're not very extensible, rely on specific HTML structures, and are sort of hard to understand if they're not well documented.