How to hide or show content based on CSS

There are a couple of non-Javascript tricks at our disposal for hiding and showing content based on CSS. To be more precise, it is the use of pseudo-class selectors which can select for an element in a specific state.

We will cover two such states that we can utilize to show or hide content.

The first one is the :focus state. Here is a quick demo before we dive in to the explanation.

The :focus pseudo-class allows us to detect if an input has been “clicked” or not. “clicked” is in quotes because we are actually detecting if an input element is in focus. The main way for an element to be in focus is for a user to click on it so we are using focus as a proxy for a user clicking on an element. It’s mainly up to the browser on which elements can receive the focus event but the input text box is a safe choice which has good browser support.

Here is the HTML for the demo:

  1. <input type="text" value="CLICK TO SHOW CONTENT">
    
  2. <div id="content">
    
  3.     and the content will show.
    
  4. </div>

The HTML is pretty simple with a text input and a div containing our content that we want to hide/show.

The CSS is where it gets interesting:

  1. #content {
  2.   display: none;
  3. }
  4. input[type="text"]{
  5.     color: transparent;
  6.     text-shadow: 0 0 0 #000;
  7.     padding: 6px 12px;
  8.     width: 60px;
  9.     cursor: pointer;
  10. }
  11. input[type="text"]:focus{
  12.     outline: none;
  13. }
  14. input:focus + div#content {
  15.   display: block;
  16. }

The first block of CSS hides our content when it is initially loaded.

The second block of CSS makes our text input look like a button. The most important part here is the first line setting the font color to transparent. In a normal text input, you will see a cursor appear when you click on it. In our case, we want to make it invisible so our text input behaves more like a button.

The third block uses the :focus pseudo-class but the purpose, again, is to make it behave more like a button by hiding the outline when input box is in focus.

The last CSS block ties everything together. The selector has two parts separated by the plus sign:

1) input:focus – This selects for the input box when it is in focus (or when a user clicks on it).
2) div#content – This selects for the content div that is currently hidden.

The “+” is the adjacent sibling selector and it will select only the specified element (div#content) that immediately follows the former specified element (input:focus). In other words, if the input box is in focus, select the div with ID=content and make it visible!

Note that if you click elsewhere in the browser, it will make the content hidden again because the input box no longer has focus.

Here is another that does the opposite. It starts with the content visible and hides when the “button” gains focus:

The other state we can use to hide content is when an element gains the hover state. This is when the mouse or pointer is hovering over an element. We can use the :hover pseudo-class to select for this and hide content. Here is the demo:

The HTML is simple:

  1. <button>HOVER OVER ME</button>
    
  2. <div id="content">
    
  3.   and the content will show.
    
  4. </div>

There is a button and a div with the content we want to show or hide.

The CSS looks very much like before:

  1. div#content {
  2.   display: none;
  3. }
  4. button:hover + div#content {
  5.   display: block;
  6. }

The first block hides the content when the page initially loads.

The second block uses the :hover pseudo-class and the adjacent sibling selector (+). It’s basically telling the browser “if the user is hovering over the button, select the div with ID=content and make it visible!”

For completeness, here is the same demo but the content initially showing:

That’s it! If Javascript is at your disposal, these are some Javascript and jQuery tutorials you can use to hide or show content.

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers! OR…you can sign up for a free Dropbox account using my referral link =) If you are not aware of what Dropbox is, it is the most awesomest online backup application there and so much more…all for free.





Published by

Allen Liu

Building websites is a passion of mine. During the course of my work, I have created some snippets of code that I hope will prove useful to other developers.

2 thoughts on “How to hide or show content based on CSS”

  1. Hi there, nice, very nice.
    How can I tie both together = have one button first click -> show content, second click -> hide content again?

    Thanks
    I’m new to all this css…

    Christian

Leave a Reply

Your email address will not be published. Required fields are marked *