Expandable Checkbox Form Card

<div class="bg-white border rounded-md border-neutral-200 p-4">
  <label class="flex items-start gap-2 text-sm text-neutral-700 mb-3">
    <input type="checkbox" class="expandable-checkbox mt-0.5 rounded border-neutral-300" />
    <span>Si le projet comporte également une modification sensible du relief du sol, précisez le cubage approximatif des terres à déplacer ainsi que l'indication de la nature des terres à enlever et, le cas échéant, la nature et l'origine des terres à amener :</span>
  </label>
  <div class="expandable-details hidden">
    <textarea rows="3" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white" placeholder="Détails sur la modification du relief..."></textarea>
  </div>
  <script>document.addEventListener('DOMContentLoaded', function() { const checkbox = document.querySelector('.expandable-checkbox'); const details = document.querySelector('.expandable-details'); checkbox.addEventListener('change', function() { if (this.checked) { details.classList.remove('hidden'); } else { details.classList.add('hidden'); } }); });</script>
</div>