Hiding a div with a close link within the content

HTML & CSS
1

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?

Thanks

2

The simplest answer is a checkbox.

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

CSS

.closebox:checked + div { visibility: none; }
2 Likes
3

visibility:hidden or display:none :slight_smile:

2 Likes
4

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?

5

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/

2 Likes
6

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

1 Like
7

Unfortunately, it is inaccessible to keyboard navigation.

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.