JSFiddle - React, Tailwind, and code Playground

by Andrey Dobrovoi

HTML

<h1>
  Тест тегов <code>details</code> &amp; <code>summary</code>
</h1>

<h2>Без заголовка</h2>
<details>
	<summary>
		Открыть
	</summary>
	My content
</details>


<h2>С заголовком</h2>
<details>
	<summary>
		<h3>Открыть</h3>
	</summary>
	My content
</details>

<h2>Без заголовка и <code>summary[role="button"]</code></h2>
<details>
	<summary role="button">
		<h3>Открыть</h3>
	</summary>
	My content
</details>


<h2>С заголовком и <code>summary[role="button"]</code></h2>
<details>
	<summary role="button">
		<h3>Открыть</h3>
	</summary>
	My content
</details>

CSS

body {
  font-family: arial;
  margin: 1.25em;
  background: #fafafa;
  padding: .55em;
}

h1 {
  margin: 0 0 .75em;
  padding-bottom: .75em;
  border-bottom: 1px solid #aaa
}

summary h3 {
  display: inline-block;
  margin: 0;
}

h2 {
  margin-top: 1.5em;
  margin-bottom: .75em;
}