I'm looking for a way to hide the details tag without the summary. In my code, the summary is only visible when a condition [isvisible == false] is met. However, even when the summary is not visible, the details keyword is still shown and I want to hide that as well. I've been searching for solutions but haven't been able to find any that don't involve using the summary tag.
https://i.sstatic.net/oitmc.png
<template>
<details>
<summary v-if="!isvisible">Hello everyone</summary>
</deatils>
<template>
<script>
export default{
data(){
return{
isvisible: true,
}
}
}
</script>
<style>
details > summary {
list-style: none;
-webkit-appearance: none;
}
details > summary::-webkit-details-marker {
display: none;
}
</style>