ExpandableBlockContent.vue

<template>
  <div class="block-content">
    <button
      type="button"
      class="block-content__button"
      aria-label="Toggle button"
      @click="isExpanded = !isExpanded"
    >
      {{ toggleCtaLabel }}
    </button>
    <p v-show="isExpanded" class="block-content__paragraph" v-html="content" />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from "vue";

export default defineComponent({
  name: "ExpandableBlockContent",
  props: {
    content: { type: String },
  },
  setup() {
    const isExpanded = ref(true);

    const toggleCtaLabel = computed(() =>
      isExpanded.value ? "Collapse" : "Expand"
    );

    return {
      isExpanded,
      toggleCtaLabel,
    };
  },
});
</script>

<style scoped>
.block-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;

  padding: 24px 20px;
  background-color: skyblue;
  border-radius: 8px;
}

.block-content__paragraph {
  color: white;
}

.block-content__button {
  color: white;
  text-decoration: underline;
}
</style>