Use trigger for collapsible in other DOM location

[wichert]

It would be nice if the collapsible pattern could support a trigger for collapsible content that is in another location. For example:

<button class="pat-collapsible" 
    data-pat-collapsible="content: #status">Show status</button>
...
<aside id="status">
  ...
</aside>

After initialisation the markup will look like this:

<button class="pat-collapsible closed" 
    data-pat-collapsible="content: #status">Show status</button>
...
<div class="panel-content closed">
  <aside id="status">
    ...
  </aside>
</div>

@cornae: is this generated markup correct?

[cornae]

With this approach I would expect panel-content to appear inside aside#status.

However, why would we approach it from the trigger element? From a design approach it might make sense to start with the element that you want to make collapsible and then decide what the trigger should be. A suggestion for a different approach:

<button id="my-trigger">
    Show status
</button>

<aside class="pat-collapsible" data-pat-collapsible="trigger: #my-trigger">
  …
</aside>

The other — and default — option for trigger would be header or perhaps first-element to reflect the current default behaviour.

It would be beneficial to have a class on the trigger element that indicates the status of the collapsible. I could imagine a class like collapsible-open/collapsible-closed.

[wichert]

Implemented in 1cf1980