# `<btu-toggleable>`

## Examples

HTML

```html
<btu-toggleable>
  <select>
    <option data-hide=".hide" ...>No element shown</option>
    <option data-hide=".hide" data-show=".show1" ...>
      Show first toggleable element
    </option>
    <option data-hide=".hide" data-show=".show2" ...>
      Show second toggleable element
    </option>
  </select>
</btu-toggleable>
<!--demo elements that toggle-->
<div class="hide show1">...</div>
<div class="hide show2">...</div>
```

Javascript

```javascript
import Toggleable from 'Toggleable'

const toggleable = new Toggleable()
const select = `<select>
                  <option data-hide=".hide">No element shown</option>
                  <option data-hide=".hide" data-show=".show1">Show first toggleable element</option>
                  <option data-hide=".hide" data-show=".show2">Show second toggleable element</option>
                </select>`
const showDiv1 = `<div class="hide show1"></div>`
const showDiv2 = `<div class="hide show2"></div>`

toggleable.append(select)
document.body.append(toggleable)
document.body.append(showDiv1)
document.body.append(showDiv2)
```

## Properties

| Name           | Default | Description                                                                                                                                                                                                                                                                                                                             | Attribute       | Legacy                    |
| -------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ------------------------- |
| `rootSelector` | `null`  | An optional CSS selector string used to query for the `root` of the Toggleable component. The `root` is used as the base element for the query selector that retrieves the elements that will be shown or hidden depending on the value selected. The `root` defaults to the document body if the `rootSelector` is missing or invalid. | `root-selector` | `data-root` on `<select>` |

## Private Properties

| Name                    | Placement          | Description         | Required?                                                                       |
| ----------------------- | ------------------ | ------------------- | ------------------------------------------------------------------------------- |
| `data-show`             | `<option>`         | CSS selector string | yes, to toggle visibility of an element (omit if option is hiding all elements) |
| `data-hidden`           | `<option>`         | CSS selector string | yes, to toggle hidden state of element(s)                                       |
| `data-form-fields-url`  | `.toggleable-form` | string              | only to fetch toggled content                                                   |
| `data-form-fields-data` | `.toggleable-form` | string              | only to fetch toggled content with data in request                              |

## How to Toggle

Toggleable adds functionality to `<select>` elements by conditionally displaying and hiding content based on the selected `<option>`. Each `<option>` can have `data-hide` and `data-show` attributes whose values are CSS selectors that match the elements to hide or show, respectively, when that `<option>` is selected.

## Working with Forms

A toggleable element can have its content dynamically loaded when it has a direct child with the class `toggleable-form` and attributes `data-form-fields-url` and `data-form-fields-data`. On selection of the option associated with this element, a fetch request will be made to the url from the attribute, and the `body` of that request will be the encoded value of the -data attribute. The response is then loaded into the toggled element.

```html
<btu-toggleable>
  <select>
    <option data-hide=".hide" ...>Default</option>
    <option data-hide=".hide" data-show="show1" ...>
      Option to trigger fetch
    </option>
    ...
  </select>
</btu-toggleable>
<div class="hide show1">
  <div
    class="toggleable-form"
    data-form-fields-data="{'_id':'123','_type':'456'}"
    data-form-fields-url="/some/url?params=789"
  ></div>
</div>
```

## Deprecated

| Name     | Type  |
| -------- | ----- |
| `toggle` | Event |
