Это тема обратной связи для эксперимента со стилями элемента details.
Пример использования тега details в BBCode:
abc
testing 123 123
123
Пример использования тега details в HTML:
11 лайков
Использование HTML-тега <details>, похоже, приводит к тому, что содержимое сливается с заголовком:
Это раскрытый блок details
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.Это HTML-блок details
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.А, я понял. Автоматический перенос строки не добавляется, и я не добавлял его вручную:
<details open>
<summary>
Это раскрытый блок details
</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
</details>
Заголовок
Этот текст будет скрыт
5 лайков
Да, вы правы. Похоже, что при самостоятельном добавлении вы не включили теги p, тогда как инструмент вставки деталей делает это автоматически.
Ваш вариант:
<details dir="ltr" open="">
<summary>
Это HTML details
</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
</details>
Инструменты вставки:
<details dir="ltr" open="">
<summary>Сводка</summary>
<p>Этот текст будет скрыт</p>
</details>
Добавленный инструментом вставки тег p сохраняет текст на новой строке.
1 лайк
Ага. Теги <p> в существующем стиле добавлять не нужно. Похоже, этот новый вариант более «тег-па́хнущий». 
2 лайка
Некоторые первые отзывы:
- Я сначала не обратил внимания на новый элемент details. Он просто не воспринимался как
[details]. Возможно, это «просто потому, что это новое», но… - Он оторван от предыдущего дизайна и стандартной реализации в браузере — стрелка находится после заголовка summary, а не до него, а закрытое состояние указывает в направлении, которое ранее (и по умолчанию) означало открытое состояние.
закрыто:
открыто:
- Элемент button/summary занимает гораздо больше места (раньше он был полувстроенным элементом)
vs - Как видно выше, ранее треугольник/стрелка была выровнена по тексту, а теперь текст «Summary» не выровнен из-за отступов кнопки (ничего ни с чем не выровнено
)
- На мобильных устройствах после взаимодействия с ним фон кнопки остаётся подсвеченным
- Я бы проголосовал за вариант с рамкой, а не с фоном — мне бы хотелось, чтобы скрытие контента делало именно это, не влияя на контраст (это особенно важно для встроенных изображений и эмодзи)
обновление:
- Уменьшенная область кликабельности:
vs
7 лайков
В этом как раз и была идея: чтобы сделать лучше, нужно отойти от того, как это было раньше, особенно от стандартного поведения браузера. Теперь мы следуем паттерну кнопки «Ответы» в нижней части постов с несколькими ответами.
Отличное замечание!
Ещё одно хорошее замечание, разберёмся с этим 
Не уверен, что мы сможем решить здесь проблему с использованием чёрных/тёмных эмодзи на тёмном/чёрном фоне…
Это тоже немного запутанно. Вы кликали где-то не по тексту раньше? Вам часто приходилось кликать здесь?
3 лайка
Да. Я пользовался этим довольно часто, особенно на мобильном. 
Меньшую область сложнее попасть. Думаю, это то место, где мой большой палец находится на экране.
5 лайков
Да! Это одно из ожиданий, связанных с настройками платформы по умолчанию: <details>, как и флажки/переключатели, а также их метки <label>, отображаются и ведут себя определённым образом. Например, я делаю то же самое на GH:
1 ответ
Не уверен, что делать это похожим на другие элементы — хорошая идея 
1 лайк
Привет! Пожалуйста, простите, если мой вопрос сформулирован не совсем верно 
Возможно ли добавить функцию для отображения скрытого контента в зависимости от группы пользователя? Например, если пользователь не зарегистрирован или не состоит в той или иной группе, он не сможет увидеть детали, и вместо этого ему будет показано модальное окно с инструкциями по получению доступа (например, предложением зарегистрироваться)?
Я знаю о существовании тем или плагинов, которые скрывают всю тему или категорию целиком. Однако иногда хочется дать пользователям возможность читать только основную информацию.
1 лайк
Такую задачу обычно решают иначе: как правило, ограничение доступа применяется к категории в целом для определённых групп или пользователей, а не к деталям внутри поста в этой категории.
Тем не менее, я уверен, что это можно реализовать с помощью плагина, однако данная тема не совсем подходит для такого обсуждения.
1 лайк
Небольшая придирка, но это немного отличается от цвета фона цитаты. Это именно тот случай «почти, но не совсем», который может выглядеть как ошибка. Я думаю, что либо должно быть полное совпадение, либо разница должна быть очевиднее.
Другие мысли…
Это ручная цитата
Это частичная цитата, которую можно развернуть
Может быть, немного адаптировать этот стиль? Тот же отступ, фон и разворачивание… хотя бы уберём границу, чтобы оно выглядело менее похоже на цитату.
Или, может быть, полностью другой стиль?
7 лайков
Я не выровнен
Меня немного беспокоит отказ от выравнивания здесь:
Это особенно заметно, когда вы начинаете с блока details.
4 лайка
Привет 
Я просто думаю вслух… Нужно ли показывать заголовок по умолчанию? Я имею в виду, что в большинстве случаев используется стандартный Summary, и, вероятно, большинство пользователей не знают, что он может быть уникальным. Возможно, было бы более естественно, если бы текст внутри details обрезался многоточием, а в конце отображалось бы ...показать больше, если он свернут, и скрыть, если развернут. Например, первой строкой обрезанного контента автоматически становился бы заголовок. Это может быть представление по умолчанию, но пользователи могут добавлять заголовок отдельно, если захотят?
4 лайка
Чтобы быть справедливым: реализация такова, что щелчок по метке должен активировать соответствующий переключатель, но не обязательно означает, что щелчок по всей пустой строке за меткой также будет работать.
2 лайка
Как вы относитесь к тому, чтобы состояние наведения было постоянным? Тогда оно будет выровнено как «кнопка» с текстом ниже и выше.
- Шеврон не выровнен по тексту (расположен немного слишком высоко)
vs
(и это не тот же самый значок шеврона?
) - Меню редактора использует треугольник для обозначения функции подробностей
- Дополнение к пункту 2.
Размещение значка после текста затрудняет его распознавание, особенно при быстром просмотре сообщения
- Также дополнение к пункту 2.
Что касается направления, в которое указывает значок: учитывая, что он работает как переключатель, не логичнее ли изменить его направление, чтобы он обозначал текущее состояние, а не действие/будущее состояние (это также относится к кнопке «Ответы») - При навигации с помощью tab отсутствует состояние фокуса
- Состояние наведения курсора видно только в закрытом виде
5 лайков
Может быть… @awesomerobot, твоё мнение?
Мелкая ошибка: при открытии детали вы прокручиваете вверх до загрузки дополнительных постов (и немного больше); после возврата контент детали не отображается (РЕДАКТИРОВАНО: или закрывается, но я бы не ожидал, что он закроется здесь)
3 лайка
Да, можно было бы использовать его как кнопку… почти как существующий HTML-тег details (плюс стрелка-шеврон)
Развернуть меня
Вот некоторый обрезанный контент... Вот некоторый обрезанный контент... Вот некоторый обрезанный контент... Вот некоторый обрезанный контент... Вот некоторый обрезанный контент... Вот некоторый обрезанный контент... Вот некоторый обрезанный контент...Также…
Что, если я использую абзац в качестве содержимого summary? Это может быть любой длины, а переносы строк могут быть странными. Стоит ли это ограничивать? Есть ли сценарий использования для очень-очень длинного текста summary? Шеврон на следующей строке:
вот подробности
3 лайка