Having trouble with a toggle feature that expands and collapses content. The issue I'm facing is that when the content opens, the button containing the title vanishes. Any insights on why this is happening and how to resolve it?
<script>
const show = ref(false);
</script>
<template>
<div class="w-full md:w-1/2 mx-auto my-12 border-8 border-black">
<button v-if="!show" class="bg-blue-500" @click="show = true">
<h2>Hello title, click to open or close content</h2>
</button>
<div v-show="show" class="bg-red-500">
<p>The content becomes available when you click to open, and is hidden when clicked again to close.
</div>
</div>
</template>
Any suggestions on preventing the title from disappearing while still achieving the desired toggle effect?