<details> demos

Demo 01 anatomy of the <details> element

This is a standard <details> element. Pressing the <summary> opens the hidden content.

<details>

                  <summary>
                  This is my summary!
                  </summary> 


                  <p>
                  This is my secret hidden information!
                  </p> 

                
</details>

This is my <summary>!

This is my secret hidden information!

Demo 02 open vs. closed

Adding "open" to the <details> element tells the browser to load the dropdown as already open.

<details open>

                  <summary>
                  This <details> element starts as open.
                  </summary> 


                  <p>
                  This information is NOT secret.
                  </p> 

                
</details>

<details>

                  <summary>
                  This <details> element starts as closed.
                  </summary> 


                  <p>
                  This information IS secret.
                  </p> 

                
</details>

This <details> element starts as open.

This information is NOT secret.

This <details> element starts as closed.

This information IS secret.

Demo 03 exclusivity

Dropdowns with name="exclusive" in the element will close all other dropdowns when it is opened.

<details name="exclusive" open>

                  <summary>
                  This <details> element starts as open.
                  </summary> 


                  <p>
                  This information is NOT secret.
                  </p> 

                
</details>

<details name="exclusive">

                  <summary>
                  This <details> element starts as closed.
                  </summary> 


                  <p>
                  This information IS secret.
                  </p> 

                
</details>

This <details> element starts as open.

This information is NOT secret.

This <details> element starts as closed.

This information IS secret.

Demo 04 simple css

We can add CSS to <details> just like any other element. Let's add a {background-color}, and use the [open] attribute selector to change colors when it opens.

details {

                  background-color:
                  lightblue; 
 
}
details[open] {

                  background-color:
                  lightgreen; 
 
}

This is my <summary>!

This is my secret hidden information!

Demo 05 changing text

We can use pseudo-classes like ::after to adjust content with the [open] attribute selector.

<details>

                  <summary>
                  Click here to
                  </summary> 


                  <p>
                  This is my secret hidden information!
                  </p> 

                
</details>

summary::after {

                  content:
                  " open"; 
 
}
details[open] summary::after {

                  content:
                  " close"; 
 
}

Click here to

This is my secret hidden information!

Demo 06 changing the marker

We also target the little arrow, a.k.a the marker. You can change the color, remove it entirely, or replace it with a custom emoji! With details[open] we can change the marker as it opens or closes.

<details>

                  <summary>
                  This is my summary!
                  </summary> 


                  <p>
                  This is my secret hidden information!
                  </p> 

                
</details>

summary::marker {

                  content:
                  "👉"; 
 
}
details[open] summary::marker {

                  content:
                  "👇"; 
 
}

This is my summary!

This is my secret hidden information!

seminar demos

resources & inspiration

documentation

articles

inspiration