Collapsible — React

---
import Collapsible from '../components/astro/Collapsible.astro';
---

<Collapsible triggerLabel="Show more" defaultOpen={false}>
  <p>Hidden content here.</p>
</Collapsible>

<!-- Rizzo CSS + accordion/collapsible script from package/vanilla docs. -->
<div class="collapsible" data-collapsible id="my-collapsible">
  <button type="button" class="collapsible__trigger" aria-expanded="false" aria-controls="my-collapsible-panel">Toggle</button>
  <div id="my-collapsible-panel" class="collapsible__panel" hidden>Content</div>
</div>

<script>
  import { Collapsible } from '$lib/rizzo';
</script>

<Collapsible triggerLabel="Show more" defaultOpen={false}>
  <p>Hidden content here.</p>
</Collapsible>

<script setup>
import Collapsible from '@/components/rizzo/Collapsible.vue';
</script>

<template>
  <Collapsible trigger-label="Show more" :default-open="false">
    <p>Hidden content here.</p>
  </Collapsible>
</template>

import { Collapsible } from './components/react';

<Collapsible triggerLabel="Show more" defaultOpen={false}>
  <p>Hidden content here.</p>
</Collapsible>