> For the complete documentation index, see [llms.txt](https://inkstellar.gitbook.io/ink-blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://inkstellar.gitbook.io/ink-blog/css-tutorials/simple-accordion.md).

# CSS Accordion

## The beauty lies within HTML5 tags :pizza: 

HTML5 tags has a lot of super powers unexplored. One of the is the [`<details>`](https://www.w3schools.com/tags/tag_details.asp) tag. Proper usage of these can limit the use of scripts inside the page.

```markup
<details> 
    <!-- more content-->
</details>
```

{% hint style="info" %}
This tag is the container. Its a combination of tags that provides us the required output.
{% endhint %}

The other tag that comes along with this is the [`<summary>`](https://www.w3schools.com/tags/tag_summary.asp) tag.

```markup
<details> 
    <summary>
    <!-- accordion title -->
    </summary>
    <!-- accordion contents -->
</details>
```

<div align="center"><img src="/files/-M5gWGb0s7FdE-nz9f5Q" alt="Image: Simple accordion using <details> and <summary> tag."></div>

## Steps to acheive

Lets take a simple html structure like the below.

HTML:

{% code title="accordion.html" %}

```markup
  <h3> Simple Accordion</h3>
		<div class="accordion">
		<details>
			<summary><span>Step 1</span> Trip information  <i></i> </summary>
			<p>Trip type : One Way </p>
      <p>From: Chennai </p>
      <p>To: Dubai </p>
      <p>Departure: 12 Aug,2020</p>
      <p>Passengers count: 2</p>
      <p>Return: </p>
		</details>
				<details>
			<summary><span>Step 2</span>Flight information <i></i> </summary>
      <p>Flight ID: </p>
      <p>Flight name: </p>
      <p>Flight Timings: </p>
      <p>Seat status: </p>
				</details>

        <details>
          <summary ><span>Step 3</span>Payment information <i></i></summary>
        <p>Card type: </p>
        <p>Card name: </p>
        <p>Card Validity:</p>
        <p>Payment status:</p>
        </details>
	</div>
```

{% endcode %}

This piece of code gives u a visual structure like the below.

<div align="center"><img src="/files/-M5gZsmLxH0JWVY1UrEZ" alt="Image: Simple html view"></div>

This is the basic of the entire concept. Clicking on the \<summary> tag which holds the accordion title, will toggle the accordion content individually for each details tag.

They work independent of each other, unless it is handled by a script.

The \<details> tag has the property to act like a toggle functionality for the contents other than the \<summary> tag. This gives us n number of possibilites to create our desired UI functionality. And it is not restricted to just a accordion feature. In this example I've planned to use it as a check list for a train ticket booking system. Lets dive back in now.

![Image: Click triggers the details tag to expand and reveal the contents inside](/files/-M5gbfOL104ia8Ocn_pw)

### How it works?

On clicking the title of the \<details>, ( which is actually the \<summary> ), the browser returns the \<details> with an attribute called `open`. This attribute plays the most part in styling the entire accordion.

Further to add to the visual clarity, I'm using font icons. Line Icons is my favourite, so I've used those.

Below is a formatted HTML with class names to differentiate active and completed steps.

### HTML

{% code title="accordion.html" %}

```markup
	<div class="accordion">
		<details>
			<summary class="active">
			<span>Step 1</span> Trip information  <i></i> </summary>
			<p class="complete">Trip type : One Way </p>
      <p class="complete">From: Chennai </p>
      <p class="complete">To: Dubai </p>
      <p class="active">Departure: 12 Aug,2020</p>
      <p>Passengers count: 2</p>
      <p>Return: </p>
		</details>
		<details>
			<summary><span>Step 2</span>Flight information <i></i> </summary>
      <p>Flight ID: </p>
      <p>Flight name: </p>
      <p>Flight Timings: </p>
      <p>Seat status: </p>
		</details>
    <details>
     <summary ><span>Step 3</span>Payment information <i></i></summary>
        <p>Card type: </p>
        <p>Card name: </p>
        <p>Card Validity:</p>
        <p>Payment status:</p>
    </details>
	</div>
```

{% endcode %}

Now comes the CSS part. This mostly revolves around the attribute part of the \<details>.

### CSS

{% code title="accordion.css" %}

```css
 details{
     background: #253448;
     margin:0;
}
 details[open]{
     padding-bottom: 10px;
     border-bottom: 1px solid #465f80;
}
 summary{
     margin-bottom:0px;
     padding:25px 20px 20px;
     color: #b1c1ca;
     display: block;
     background:#1b2939;
}
 details[open] summary{
     border-bottom: 1px solid #465f80;
     margin-bottom: 10px;
}
 details p{
     padding:0;
     transition: all 0.2s ease-in;
     transition-property: padding;
     margin: 0;
     color: #697e99;
     font-size:0.875em;
}
 details[open] p{
     padding:5px 20px;
     transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
     transition-property: padding-top;
}
 details summary::before,details p::before{
     content:"\ea54";
     font-family: Lineicons;
     padding-right:15px;
     color:#697e99;
}
 details summary.active::before,details p.active::before{
     content:"\ea1d";
     font-family: Lineicons;
     padding-right:15px;
}
 details p.complete{
     color: rgb(141, 253, 237);
}
 details .complete::before{
     color:rgb(141, 253, 237);
}
 details p.active, details .active::before{
     color: rgb(253, 141, 229);
}
 details summary span{
     position: absolute;
     font-size: 0.65em;
     text-transform:uppercase;
     top:12px;
     color:#999;
     text-indent:3px;
}
 summary i{
     float:right;
     font-style: normal;
     opacity:0.5;
     transition: all 0.2s ease-in;
     color: #fff;
}
 summary:hover i,details[open] summary i{
     opacity:1;
     transition: all 0.2s ease-in;
}
 summary i::before{
     content: "\ea27";
     font-family: Lineicons;
}
 details[open] summary i::before{
     content: "\ea22";
     font-family: Lineicons;
}
```

{% endcode %}

This will give you the desired output as per the image below.

![](/files/-M5glT-G-lx-c8MqsPSM)

Now a further addition to the feature, to make the title of each section float on top while scrolling, we need to add a small piece. This is added to the summary tag in the css.

```css
summary{
    position: sticky;
    top: 0;
}
```

### Demo

The demo can be found in the link below.&#x20;

[Demo](https://stackblitz.com/edit/inkui-accordion?embed=1\&file=inkui.css\&hideExplorer=1\&hideNavigation=1):pizza:&#x20;

Thank you for reading it.&#x20;


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://inkstellar.gitbook.io/ink-blog/css-tutorials/simple-accordion.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.