Mastering HTML Details and Summary

Introduction

In HTML, the <summary> tag is used to create an expandable and collapsible summary element for the content present in the web page.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/LayoutandSectioningGroup -.-> html/access_cons("`Accessibility Considerations`") subgraph Lab Skills html/para_br -.-> lab-70849{{"`HTML Details Summary`"}} html/lists_desc -.-> lab-70849{{"`HTML Details Summary`"}} html/access_cons -.-> lab-70849{{"`HTML Details Summary`"}} end

Adding the `<details>` tag

Before adding the <summary> tag, we need to create a content section which can be expanded or collapsed. For that, we will use the <details> tag. Add the following code in the index.html file inside the <body> tag.

<details>
  <summary>Click me to see the content</summary>
  <p>Content goes here.</p>
</details>

In the above code, we have added a summary tag inside the details tag to define the summary of the content.

Adding the `aria-expanded` attribute

We can add an aria-expanded attribute to the details tag to provide the current state of the content. When the content is expanded, the value of aria-expanded will be true, and when it is collapsed, the value will be false. Add the following code after the <summary> tag to include the aria-expanded attribute.

<details>
  <summary aria-expanded="false">Click me to see the content</summary>
  <p>Content goes here.</p>
</details>

Styling the summary tag

The summary tag does not have any specific attributes, but we can style it using CSS. Add the following code in the <style> tag to add some styling to the summary tag.

summary {
  padding: 10px;
  background-color: #eee;
  cursor: pointer;
}

Adding more content

We can add more content inside the details tag, and it will automatically be expandable and collapsible. Add the following code after the first paragraph to add more content.

<details>
  <summary aria-expanded="false">Click me to see the content</summary>
  <p>Content goes here.</p>
  <p>More content.</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</details>

Adding multiple expandable sections

We can add multiple expandable sections to the web page. Add the following code to create another expandable section.

<details>
  <summary aria-expanded="false">Another section</summary>
  <p>Content of another section</p>
</details>

Summary

The <summary> tag can be used to create expandable and collapsible sections of content on a web page. We can add more content inside the details tag and use styling to customize the appearance of the summary tag. By adding the aria-expanded attribute, we can provide the current state of the content, making it accessible for users with disabilities.

HTML Details Summary