How to hide the details tag without summary tag?-CodePudding

I want to hide the details tag without summary, In my code summary is not visible for one condition[as isvisible==false]. So when summary is not visible then the details keyword is visible but I want to hide that too. I tried to find solutions but i can't get any solutions without using summary tag.

<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>

CodePudding user response：

The closest you could get is the :empty pseudoclass:

details:empty {
  display: none;
}

Although this will only work if the summary element doesn't exist, so would require markup changes.

CodePudding user response：

To hide the details tag without a summary element, you can try using a combination of the summary element and the :not pseudo-class in your CSS.

details:not(summary) {
  display: none;
}

This will hide the details element if it does not have a summary element as a child.

CodePudding user response：

Move the v-if to the <details> element.

<details v-if="!isvisible">