1

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:

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

everyday
  • 23
  • 3
  • Could you please post a code sample? – hydra Jan 31 '20 at 15:03
  • It looks like a basic html [details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) tag. However you want some extra niftyness that you do a good job identifying requirements for but haven't made an effort towards so appears like just shopping for someone to do your work for you? Personally I would start with a checkbox/label for the toggling and use pseudo elements for the icon and text changes on the `:checked` state. Give something a try and come on back when you're stuck :) – Chris W. Jan 31 '20 at 16:32
  • I really am trying. I have tried to figure this out for about 3 hours. The details method doesn't seem to work as the examples I found always included a and I want to append text - in essence. Given my skill, the best I can do is look for similar examples and try to make them work. Maybe this isn't the right forum for someone like me? If that's the case, please let me know. – everyday Jan 31 '20 at 18:17

2 Answers2

0

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.

eMontielG
  • 396
  • 1
  • 7
  • Awesome. Way more than I expected. I'm going to try and figure out the fading part but even if I can't, I think I can get this to work great for me. Thanks eMontielG! – everyday Jan 31 '20 at 18:26
0

Alright, I got this working well enough for my purposes. I had to modify eMontilG's code as it didn't "play nice" with WordPress. Below is the code.

HTML

<label class="show-hide">
<input type="checkbox" class="input-checkbox"/>
<span class="less-text">
&#9658;This is the start of the paragraph with fading text...
</span>
<span class="more-text">
&#x25BC;This is the start of the paragraph with fading text no longer fading and the rest of the content shown.
</span>
</label>

CSS

.show-hide {
display: flex;
}
.input-checkbox {
display: none;
}
.less-text {
display: block;
}
.more-text {
display: none;
}
.input-checkbox:checked ~ .less-text {
display: none;
}
.input-checkbox:checked ~ .more-text {
display: block;
}
.input-checkbox:not(:checked) ~ .less-text {
display: block;
}
.input-checkbox:not(:checked) ~ .more-text {
display: none;
}

I know this isn't "very extensible and relies on specific HTML structures" as eMontilG rightly pointed out but it works.

everyday
  • 23
  • 3