/* dynamically hide or show a particular item in the DOM based on the value of some variable. This variable is most times a boolean flag. With vanilla JavaScript */



<button id="btn">Clicke me</button>
<p id="text">Lorem ipsum dolor sit amet,...</p>

<script>
    let isShown = false;

    const btn = document.getElementById('btn');
    const text = document.getElementById('text');

    updateText(isShown)

    btn.addEventListener('click', () => {
        isShown = !isShown
        console.log(isShown)
        updateText(isShown)
    })

    function updateText(isShown) {
        text.style.display = isShown ? 'block' :'none';
    }
</script>

//in Vue:

<template>
    <button @click="toggle">Click me</button>
    <p id="text" v-show="isShown">Lorem ipsum dolor sit amet,...</p>
</template>

<script>
export default {
    data() {
        return {
            isShown: false,
        };
    },
    methods: {
        toggle() {
        this.isShown = !this.isShown;
        },
    },
}
</script>