Need my div to stay when inside my div is clicked.

[canadacatman1]

I found a code to show and hide content. It is a very easy code but the content disappears even if you click on the content in the box. There is no js just CSS. Please help me fix this problem.

https://codepen.io/anon/pen/bvMpmO

[Beverleyh]

Your demo uses :focus to reveal content, which unfortunately means that when a second element receives focus, the focus is inevitably removed from the first element and the content hides again. There is no way to “fix” this behaviour. :focus is just doing what it’s supposed to do.

A different way to do things, using CSS, would be with the :checked selector (checkbox hack) Or the :target selector. Examples of each can be found here https://stackoverflow.com/questions/17731457/hide-show-content-list-with-only-css-no-javascript-used But I suggest you research each selector to understand more about their behaviours and suitability of use in various situations, i.e. what you can/can’t, should/shouldn’t do with them.

Otherwise, use JavaScript. A quick Google search for “show hide div with JavaScript” brings up many examples.

[JeroenR]

Maybe you can use the CSS property from this article: https://css-tricks.com/a-css-approach-to-trap-focus-inside-of-an-element/. Then you should be able to click on items within a container as long as the focus is in that specific container.

[Author]

Posts