Add snippet to close a summary-element if a different detail element is opened

[msbt]

This should fix #413

[amotl]

About

Thanks a stack for providing this implementation. I've converged it to tech-writing/sphinx-design-elements#15 in a slightly more generic manner, calling it a "Dropdown Group", as inspired by using CSS toggle-group to group exclusive toggles.

Documentation and Demo

https://sphinx-design-elements.readthedocs.io/en/latest/dropdown-group.html

Code

Your code is now at sphinx-design-elements:addon.js.

Details

Effectively, it extends the CSS selector, now using document.querySelectorAll(".dropdown-group details") for selecting only relevant elements instead. With corresponding markup, it looks like this.

rST

.. div:: dropdown-group

    .. dropdown:: Dropdown A

        Dropdown content A

    .. dropdown:: Dropdown B

        Dropdown content B

MyST

::::{div} dropdown-group

:::{dropdown} Dropdown A
Dropdown content A
:::

:::{dropdown} Dropdown B
Dropdown content B
:::

::::

[amotl]

GH-419 has a corresponding patch, which brings in the dropdown-group CSS rule from sphinx-design-elements, and the JavaScript code from your pen, effectively superseding this patch. I hope you like it. Thank you again for submitting this fix.

[msbt]

@amotl Appreciate it, thanks! Quick question about the chevrons you're using for up/down: Wouldn't it be nicer to have only one that turns 180° when you open it instead of two that show/hided depending on the status?

Like

details.sd-dropdown .sd-summary-down {
  transition: 180ms;
}

details.sd-dropdown[open] > .sd-summary-title .sd-summary-down {
  /* visibility: hidden; */
  transform: rotate(-180deg);
}

If so, do you want me to submit a PR over there?

[amotl]

Thanks. I've converged your suggestion into tech-writing/sphinx-design-elements#20, in order to track it properly.