Expand Collapse HTML5

Test

by roge roge

HTML

<section>
   <article>
      <details>
         <summary>article 1, detail summary 1</summary>
         <details>
            <summary>article 1, detail summary 1.1</summary>
            <p>some text</p>
         </details>
         <details>
            <summary>article 1, detail summary 1.2</summary>
            <p>some other text</p>
				<details>
					<summary>article 1, detail summary 1.2.1</summary>
					<p>some other text</p>
				</details>
         </details>
      </details>
		
      <details>
         <summary>article 1, detail summary 2</summary>
         <p>some other text</p>
      </details>
   </article>
	
   <article>
      <details>
         <summary>article 2, detail summary 1</summary>
         <details>
            <summary>article 2, detail summary  1.1</summary>
            <p>some other text</p>
         </details>
         <details>
            <summary>article 2, detail summary  2.2</summary>
            <p>some other text</p>
         </details>
      </details>
		
      <details>
         <summary>article 2, detail summary 2.2</summary>
         <p>some other text</p>
      </details>
   </article>
</section>

CSS

summary::-webkit-details-marker {
   color: #00AC00;
   font-size: 125%;
   margin-right: 2px;
}

summary:focus {
   outline-style: none;
}

article > details > summary {
   font-size: 18px;
   margin-top: 16px;
   background-color: #ddd;
	padding 4px;
}

details > p {
   margin-left: 18px;
	margin: 4px 0 4px 18px;;
}

details details {
   margin-left: 26px;
	padding 6px;
}

details details summary {
   font-size: 16px;
}