Hiding a div with a close link within the content

[toolman]

Hi there,

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

Edit fiddle - JSFiddle - Code Playground

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?

Thanks

[m_hutley]

The simplest answer is a checkbox.

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

CSS

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

[PaulOB]

visibility:hidden or display:none

[toolman]

Thanks

I now have this:

Edit fiddle - JSFiddle - Code Playground

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

[Erik_J]

@toolman

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.
</div>

.pop-box {
  background: #ddd;
  padding: 30px;
}
#closebox:checked + label,
#closebox:checked + label + div { 
  display: none;
} 

https://jsfiddle.net/tbf2cuwx/

The posted above code example:
https://jsfiddle.net/c5kdL6wb/

[toolman]

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

[TechnoBear]

Unfortunately, it is inaccessible to keyboard navigation.