@panoramax/web-viewer/docs/reference/components/ui/TogglableGroup.md

Panoramax web viewer for geolocated pictures

<a name="Panoramax.components.ui.TogglableGroup"></a>

## Panoramax.components.ui.TogglableGroup ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
**Kind**: static class of <code>Panoramax.components.ui</code>  
**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
**Element**: pnx-togglable-group  
**Slot**: `button` The button on which click leads to open/close menu  
**Slot**: `default` The menu to make shown/hidden on button click  

* [.TogglableGroup](#Panoramax.components.ui.TogglableGroup) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
    * [new TogglableGroup()](#new_Panoramax.components.ui.TogglableGroup_new)
    * [.properties](#Panoramax.components.ui.TogglableGroup+properties) : <code>Object</code>

<a name="new_Panoramax.components.ui.TogglableGroup_new"></a>

### new TogglableGroup()
Togglable Group element allows to make a menu appear/disappear based on button click.

**Example**  
```html
<pnx-togglable-group padded="false" ._parent=${viewer}>
  <pnx-button slot="button">
    Open menu
  </pnx-button>
  <div>Menu content</div>
</pnx-togglable-group>
```
<a name="Panoramax.components.ui.TogglableGroup+properties"></a>

### togglableGroup.properties : <code>Object</code>
Component properties.

**Kind**: instance property of [<code>TogglableGroup</code>](#Panoramax.components.ui.TogglableGroup)  
**Properties**

| Name | Type | Description |
| --- | --- | --- |
| [padded] | <code>string</code> | If set, adds a 15px padding to the menu panel. |