🇷🇺 Тег spolier и wordpress.com – Как быть?

Иногда необходимо отобразить огромный объем информации на странице, но хочется это сделать так, чтобы пользователь мог выбрать, что именно он хочет, чтобы у него отобразилось. То бишь, есть какой-то список и Вы не хотите, чтобы всё содержимое списка отображалось в развёрнутом виде

Вещь 1

Информация про вещь 1

Вещь 2

Информация про вещь 2

Вещь 3

Информация про вещь 3

Вещь 4

Информация про вещь 4

А хотите, наоборот, спрятать содержимое списка “информация про вещь…”, при этом оставив название “Вещь 1” и предоставив пользователю возможность самому развернуть информацию про ту “вещь”, про которую он хочет почитать более подробно.

 

Вещь 1

Информация про вещь 1

Вещь 2

Информация про вещь 2

Вещь 3

Информация про вещь 3

Вещь 4

Информация про вещь 4

 

С такими вещами на помощь приходит тег spoiler.

С wordpress.org всё понятно – поставил плагин, появился функционал “spoiler” и голова не болит. А как же быть с менее гибкой wordpress.com?

В ситуации с wordpress.com на помощь приходит тег из HTML5 под названием “details”

Как пользоваться?

Возьмем пример выше:

Вещь 1

Информация про вещь 1


Хочу, чтобы стало как для людей:

 

Вещь 1

Информация про вещь 1

 

Как это будет выглядеть в HTML

f80eb596

Видим, что для того, чтобы обернуть в “спойлер” нужно обернуть то, что мы хотим в тег “details”. Внутри тега “details” оборачиваем в “summary” то, что мы хотим, чтобы отображалось изначально, в нашем случае “Вещь 1” – название спойлера. А уже под “summary” и над закрытием тега “details” пишем то, что мы хотим, чтобы пользователи видели при раскрытии спойлера.

2017 год, но не все в нём живут

Конечно прекрасно, когда на дворе 2017 год, только не все, к сожалению в нём живут. О чём речь? О возможности использования тега “details” в разных браузерах.

84ba3d48

5e7c271f

Internet Explorer в очередной раз умиляет своей, даже не знаю как выразиться, … функциональностью, вот.  У кого Opera Mini на телефонах, те не смогут вкусить все прелести тега “deatails”. Не забываем про Edge, который тоже не сможет функционально отобразить тег “details”.

Также небольшие сюрпризы, в очень конкретных случаях, ожидают пользователей Chrome и обладателей устройств Samsung, о чём Вы можете почитать на вот этом прекрасном ресурсе (на английском).


Такие дела. На данный момент (13.04.17) это единственное решение, которое я нашёл для платформы wordpress.com, хоть и хромает / отсутсвует функциональность отображения тега “display” в Internet Explorer и т.д.

Love it or hate it…

Будем надеяться, что команда wordpress.com всё-таки соберётся с духом и внедрит в платформу свой аналог тегу “spolier”, которым без проблем наслаждаются пользователи wordpress.org .

PS попробую поэкспериментировать с тегом “details” и CSS, дабы придать более презентабельный вид кнопке “спойлер”.

Почему у Вас другой дизайн тега “details”? Потому что я поработал с CSS и из того,

что было (скорее всего у Вас такой же):

ed5ee313

21310a71

получил на выходе такой дизайн:

e6a1b78e

aab5668a

2b0d9009

Напоминаю, что если Ваш блог заканчивается на wordress.com, то у Вас нет доступа к CSS Вашего сайта 😦

Функция доступна премиум-пользователям.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s