показать / скрыть исчезающий текст css только - PullRequest
Новая
       139

показать / скрыть исчезающий текст css только

0 голосов
/ 31 января 2020

Я хотел бы показать / скрыть часть абзаца следующим образом:

  1. Начинает выглядеть так:

    ► Это начало абзаца с замиранием текста

  2. После нажатия «каретки» слева это выглядит так:

    ▼ Это начало абзац с исчезающим текстом больше не исчезает, а остальное содержимое отображается.

  3. При нажатии на «каретку» вниз возвращается:

    ► Это начало абзаца с замиранием текста

Как мне кажется, может что-то вроде этой работы? 

<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 Мне нужна помощь с

  1. Показать / скрыть соответствующий div
  2. Удалить все форматирование ссылок
  3. Стиль затухания CSS

I ' Мы смотрим на следующее, но не можем собрать его воедино:

Это что-то за пределами моей досягаемости, так что если кто-то готов помочь, это будет с благодарностью!

Ответы [ 2 ]

0 голосов
/ 01 февраля 2020

Хорошо, я получил это достаточно хорошо для моих целей. Мне пришлось изменить код eMontilG, так как он не «хорошо играл» с WordPress. Ниже приведен код.

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;
}

Я знаю, что это не "очень расширяемый и зависит от специфики c HTML структуры ", как правильно заметил eMontilG, но это работает.

0 голосов
/ 31 января 2020

Тег <details> не является структурным элементом HTML, поэтому я не думаю, что действительно возможно взломать то, что вы хотите с ним.

Вот реализация , использующая флажки и родственные селекторы, одним (из многих) недостатков этого является то, что вам придется определять как сводку, так и полный абзац. Это или аналогичные CSS только приложения на самом деле не то, что я бы рекомендовал делать. Они не очень расширяемы, опираются на определенные c HTML структуры и их сложно понять, если они недостаточно документированы.

...