import CodeRender from '../../CodeRender'

### Collapse with focus

<CodeRender
  code={`
  <div tabindex="0" class="collapse bg-base-200"> 
  <div class="collapse-title text-xl font-medium">
    Focus me to see content
  </div>
  <div class="collapse-content"> 
    <p>tabindex="0" attribute is necessary to make the div focusable</p>
  </div>
</div>
  `}
/>

```html
<div tabindex="0" class="collapse bg-base-200">
  <div class="collapse-title text-xl font-medium">Focus me to see content</div>
  <div class="collapse-content">
    <p>tabindex="0" attribute is necessary to make the div focusable</p>
  </div>
</div>
```

### Collapse with checkbox

<CodeRender
  code={`
 <div class="collapse bg-base-200">
  <input type="checkbox" /> 
  <div class="collapse-title text-xl font-medium">
    Click me to show/hide content
  </div>
  <div class="collapse-content"> 
    <p>hello</p>
  </div>
</div>
  `}
/>

```html
<div class="collapse bg-base-200">
  <input type="checkbox" />
  <div class="collapse-title text-xl font-medium">Click me to show/hide content</div>
  <div class="collapse-content">
    <p>hello</p>
  </div>
</div>
```

### Collapse using `<details>` and `<summary>` tag

<CodeRender
  code={`
<details class="collapse bg-base-200">
  <summary class="collapse-title text-xl font-medium">Click to open/close</summary>
  <div class="collapse-content"> 
    <p>content</p>
  </div>
</details>
  `}
/>

```html
<details class="collapse bg-base-200">
  <summary class="collapse-title text-xl font-medium">Click to open/close</summary>
  <div class="collapse-content">
    <p>content</p>
  </div>
</details>
```

### Force open

<CodeRender
  code={`
<div tabindex="0" class="collapse collapse-open border border-base-300 bg-base-200"> 
  <div class="collapse-title text-xl font-medium">
    I have collapse-open class
  </div>
  <div class="collapse-content"> 
    <p>tabindex="0" attribute is necessary to make the div focusable</p>
  </div>
</div>
  `}
/>

```html
<div tabindex="0" class="collapse collapse-open border border-base-300 bg-base-200">
  <div class="collapse-title text-xl font-medium">I have collapse-open class</div>
  <div class="collapse-content">
    <p>tabindex="0" attribute is necessary to make the div focusable</p>
  </div>
</div>
```

### Force close

<CodeRender
  code={`
<div tabindex="0" class="collapse collapse-close border border-base-300 bg-base-200"> 
  <div class="collapse-title text-xl font-medium">
    I have collapse-close class
  </div>
  <div class="collapse-content"> 
    <p>tabindex="0" attribute is necessary to make the div focusable</p>
  </div>
</div>
  `}
/>

```html
<div tabindex="0" class="collapse collapse-close border border-base-300 bg-base-200">
  <div class="collapse-title text-xl font-medium">I have collapse-close class</div>
  <div class="collapse-content">
    <p>tabindex="0" attribute is necessary to make the div focusable</p>
  </div>
</div>
```

### Custom colors for collapse that works with focus

<CodeRender
  code={`
<div tabindex="0" class="collapse bg-primary text-primary-content focus:bg-success focus:text-success-content">
  <div class="collapse-title">
    Focus me to see content
  </div>
  <div class="collapse-content"> 
    <p>tabindex="0" attribute is necessary to make the div focusable</p>
  </div>
</div>
  `}
/>

```html
<div tabindex="0" class="collapse bg-primary text-primary-content focus:bg-success focus:text-success-content">
  <div class="collapse-title">Focus me to see content</div>
  <div class="collapse-content">
    <p>tabindex="0" attribute is necessary to make the div focusable</p>
  </div>
</div>
```

### Custom colors for collapse that works with checkbox

<CodeRender
  code={`
<div class="collapse bg-base-200">
  <input type="checkbox" class="peer" /> 
  <div class="collapse-title bg-primary text-primary-content peer-checked:bg-success peer-checked:text-success-content">
    Click me to show/hide content
  </div>
  <div class="collapse-content bg-primary text-primary-content peer-checked:bg-success peer-checked:text-success-content"> 
    <p>hello</p>
  </div>
</div>
  `}
/>

```html
<div class="collapse bg-base-200">
  <input type="checkbox" class="peer" />
  <div class="collapse-title bg-primary text-primary-content peer-checked:bg-success peer-checked:text-success-content">Click me to show/hide content</div>
  <div class="collapse-content bg-primary text-primary-content peer-checked:bg-success peer-checked:text-success-content">
    <p>hello</p>
  </div>
</div>
```
