<a id="collapse"></a>

## Collapse  
**Category**: Data Display
Expandable/collapsible content sections
### Examples

#### Basic Collapse  
```python
Div(
    Div('Focus me to see content', cls='collapse-title text-xl font-medium'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='collapse bg-base-200'
)
```

#### Focus Colors  
```python
Div(
    Div('Focus me to see content', cls='collapse-title'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='bg-primary text-primary-content focus:bg-secondary focus:text-secondary-content collapse'
)
```

#### Force Open  
```python
Div(
    Div('I have collapse-open class', cls='collapse-title text-xl font-medium'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='collapse collapse-open border-base-300 bg-base-200 border'
)
```

#### Bordered Style  
```python
Div(
    Div('Focus me to see content', cls='collapse-title text-xl font-medium'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='collapse border-base-300 bg-base-200 border'
)
```

#### Arrow Collapse  
```python
Div(
    Div('Focus me to see content', cls='collapse-title text-xl font-medium'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='collapse collapse-arrow border-base-300 bg-base-200 border'
)
```

#### Checkbox Collapse  
```python
Div(
    Input(type='checkbox'),
    Div('Click me to show/hide content', cls='collapse-title text-xl font-medium'),
    Div(
        P('hello'),
        cls='collapse-content'
    ),
    cls='collapse bg-base-200'
)
```

#### Force Closed  
```python
Div(
    Div('I have collapse-close class', cls='collapse-title text-xl font-medium'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='collapse collapse-close border-base-300 bg-base-200 border'
)
```

#### Details Collapse  
```python
Details(
    Summary('Click to open/close', cls='collapse-title text-xl font-medium'),
    Div(
        P('content'),
        cls='collapse-content'
    ),
    cls='collapse bg-base-200'
)
```

#### Plus/Minus Collapse  
```python
Div(
    Div('Focus me to see content', cls='collapse-title text-xl font-medium'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='collapse collapse-plus border-base-300 bg-base-200 border'
)
```

#### Checkbox Colors  
```python
Div(
    Input(type='checkbox', cls='peer'),
    Div(
        'Click me to show/hide content', 
        cls='collapse-title peer-checked:bg-secondary peer-checked:text-secondary-content'
    ),
    Div(
        P('hello'),
        cls='collapse-content peer-checked:bg-secondary peer-checked:text-secondary-content'
    ),
    cls='collapse bg-primary text-primary-content'
)
```