Hide HTML div once button is clicked with cookies?

Question

I'm trying to hide this message but without success in vue js.

Currently im using js-cookie library

What I am actually trying to do:

html

 <div v-show="closeBox()">                     
    <span><a id="closeButton" @click="closeBox()" href="#">Close</a></span>
       <p>som info message</p>
     </div>

javascript:

closeBox(){
    if(#CloseButton.clicked()){ // if the button is clicked (not working in vue js)
    Cookies.set("cookie", "false");
    var cookie = Cookies.get("cookie");
        }
          else
         {
        cookie = true
        }
        return cookie;

score 0 · Answer 1 · answered Sep 15 '20 at 13:41

I see you are trying to hide/close the div when the span is clicked.

You need to register the event method in the same vue component.
Also, it is better to use reactive state (showBox below) to show/hide the div

watch this example code...

<div v-show="showBox">                     
    <span><a id="closeButton" @click.prevent="closeBox" href="#">Close</a></span>
       <p>som info message</p>
     </div>

data() {
  return: {
    showBox: true
  }
},
methods: {
  closeBox() {
    this.showBox = false;
    Cookies.set("cookie", "false");
    var cookie = Cookies.get("cookie");
        }
          else
         {
        cookie = true
        }
        return cookie;
        ...

Hi, it seems like closeBox() methode is unfinished. Isn't there supposed to be an "if" somewhere? — pancake, Sep 15 '20 at 16:53
@MishMish no you would not need an if with vue. The `showBox` state handles that. Setting to false will hide (`display: none;`) the div since it depend on `showBox` via the `v-show` directive. — Kwesi Smart, Sep 15 '20 at 22:12

ma_jafari · Answer 2 · 2020-09-15T14:36:13.340

0

You can do this with vanilla js, css and HTML. in you'r HTMl:

 <div v-show="closeBox()">                     
    <span><a id="closeButton" @click="closeBox()" href="#">Close</a></span>
       <p id="message">som info message</p>
  </div>

You'r js:

closeBox(){
    let closeButton = document.getElementById("closeButton")
    let message = document.getElementById("message")
    
    if(closeButton.clicked()){  // pseudo code
        message.className += "hide"
        // sets the cookie
       document.cookie = 'cookie=test; expires=Sun, 1 Jan 2023 00:00:00 UTC; path=/'
    }
}

and finally in you'r css:

.hide {
    display: none;
}

Update

set cookie added in answer. For more reference on working with cookies using vanilla js follow this link.

edited Sep 15 '20 at 14:36

answered Sep 15 '20 at 13:46

ma_jafari

1,021
1
6
24

Hi, but where is the cookie added? – pancake Sep 15 '20 at 14:16
@MishMish Question was about hiding the div. but you can also add cookie using vanilla js I added it to the answer. by the way why did you write `if(button.clicked)`? the function will only be called if button is clicked – ma_jafari Sep 15 '20 at 14:27

score 0 · Accepted Answer · answered Sep 16 '20 at 11:55

Here is the answer to my question. Where you can add a cookie to a close/hide button so it won't show again, unless the user deletes their browser data.

The following is achieved by using js-cookie library

<template>
  <div v-show="isBoxShowing">

    <a @click="closeBox">Close</a>
   
  </div>
</template>

<script>
// here you import the cookie lib
export default {
  data () {
    return {
      isBoxShowing: Cookies.get('cookie') !== 'false'
    }
  },

  methods: {
    closeBox () {
      Cookies.set('cookie', 'false')
      this.isBoxShowing = false
    }
  }
}
</script>

Hide HTML div once button is clicked with cookies?

3 Answers3