About this snippet

Create a simple, accessible accordion (collapsible content section) using only semantic HTML5 <details> and <summary> tags. No JavaScript is needed for basic functionality.

Size
948 bytes
Uses
HTML, CSS
Loads
Nothing external
Views
365

Collections

Related snippets

<details>
  <summary>Section 1 Title - Click to Expand</summary>
  <p>This is the content for section 1. It is hidden by default and appears when the summary is clicked.</p>
</details>
<details>
  <summary>Section 2 Title - Click to Expand</summary>
  <p>This is the content for section 2. You can put any HTML content here, like text, images, or lists.</p>
</details>
* {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  box-sizing: border-box;
}
details {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: .5em .5em 0;
  margin-bottom: 1em;
  background-color: #f9f9f9;
}
summary {
  font-weight: 500;
  margin: -.5em -.5em 0;
  padding: .5em;
  cursor: pointer;
  outline: none; /* Removes default focus outline in some browsers */
}
details[open] {
  padding: .5em;
}
details[open] summary {
  border-bottom: 1px solid #ddd;
  margin-bottom: .5em;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save