Question

I’m trying to add an announcement bar to a wordpress page. I know how to add the bar, but I also want it to disappear when the user clicks the “x” on the bar.

The code I have so far:

CSS

#message_box {
position: absolute;
top: 0; left: 0;
z-index: 10;
background:#ffc;
padding:5px;
border:1px solid #CCCCCC;
text-align:center;
font-weight:bold;
width:99%;
}

Html

<div id="message_box">
    <img id="close_message" style="float:right;cursor:pointer" src="...." />
    TEXT HERE
</div>

Now how could I implement JS into wordpress so that the notification disappears when the user clicks the “x” image?

Answer 1

When you are not using jQuery already, you can just use pure Javascript. Loading jQuery for just 4 lines of code is a bit overkill.

document.getElementById("close_message").onclick = function() {
    document.getElementById("message_box").style.display = 'none';
};