Hiding a div with a close link within the content

Hi there,

I have the following fiddle which shows a div when the page loads:

It has a close link that hides the box. This is ok, but if the user clicks anywhere else on the page, it opens it again.

I would only like to show the box once on the page so I have tried putting the close link inside the content box, but it stops it from closing.

Does anyone know how I can do this?


The simplest answer is a checkbox.

<input type='checkbox' class='closebox'>
  here is some text.


.closebox:checked + div { visibility: none; } 

visibility:hidden or display:none :slight_smile:


Thanks :slight_smile:

I now have this:

I guess I would then style the checkbox into an icon or text so it’s not an actual box?

You could give the input a label and hide the input element.

That would work the same but only show the label text.

It would need a page reload to show again, just as you required, if you also hide the label so it can’t be unchecked by another click.

<input hidden type='checkbox' id='closebox'>
<label for="closebox">Close</label>
<div class="pop-box">
  here is some text.
.pop-box {
  background: #ddd;
  padding: 30px;
#closebox:checked + label,
#closebox:checked + label + div { 
  display: none;


The posted above code example:


Thank you for the examples @Erik_J they are perfect. The second one with the refresh works perfectly :slight_smile:

1 Like

Unfortunately, it is inaccessible to keyboard navigation.

1 Like