Тег DETAILS

  Парный блочный тег DETAILS предназначен для выделения контента, который надо скрыть и(или) отобразить на Web-странице по требованию.
  Внутренний контент элемента этого тега не виден на Web-странице, однако вместо него браузер выведет некий заголовок.
  Но если элемент тега DETAILS связать с элементом тега SUMMARY (поместив второй в первый), то заголовком станет контент элемента тега SUMMARY.
  В любом случае по заголовку можно щелкать мышкой для разворачивания или сворачивания контента тега DETAILS.
  Атрибуты:
  OPEN - Устанавливает разрешение на отображение контента элемента тега сразу после загрузки HTML-документа.
  В этом случае контент элемента тега DETAILS на Web-странице появится вместе с заголовком. Однако, щелчок по заголовку мышкой снова скроет этот контент.
  • Значение:

    • Нет, только присутствие.

  • Значение по умолчанию - Выключен.
  • Атрибут не обязательный.


Пример (надо щёлкнуть мышкой по треугольнику):
<DIV>
   Ну и рожа у тебя, Шарапов! - Это
   <DETAILS>
     <SUMMARY>Аблигация</SUMMARY>
     Манька-Аблигация
   </DETAILS>
   постаралась!
</DIV>
Результат:
Ну и рожа у тебя, Шарапов! - Это
Аблигация Манька-Аблигация
постаралась!

Ещё пример:
<DIV>
   Ну и рожа у тебя, Шарапов! - Это
   <DETAILS STYLE="width: auto; margin-top: -27px; margin-left: 255px ">
     <SUMMARY STYLE="width: 70px; font-size: 10pt ">Аблигация</SUMMARY>
     Манька-Аблигация
   </DETAILS>
   <DIV STYLE="width: auto; margin-top: -20px; margin-left: 400px">
    постаралась!
   </DIV>
</DIV>
Результат:
Ну и рожа у тебя, Шарапов! - Это
Аблигация Манька-Аблигация
постаралась!

Ещё пример:
Ну и
   <DETAILS STYLE="width: auto; margin-top: -17px; margin-left: 45px">
     <SUMMARY STYLE="width: 50px; font-size: 10pt">лицо</SUMMARY>
     <IMG SRC="../content/ROJA.jpg">
     рожа
   </DETAILS>
   <DIV STYLE="width: auto; margin-top: -22px; margin-left: 250px">
     у тебя, Шарапов!
   </DIV>

Результат:
Ну и
лицо рожа
у тебя, Шарапов!