Showing and hiding content with pure CSS3

Showing and hiding content with pure CSS3

Creating expanding and collapsing (or show and hide) content on websites used to be the domain of JavaScript, but in modern times we can recreate such functionality without JavaScript, using a combination of :focus, and CSS3 opacity and transitions. In this article, Corey Mwamba shows you how.

( Read the article )

It appears that the indirect sibling selector is actually now called the <a href="http://www.w3.org/TR/css3-selectors/#general-sibling-combinators">general sibling combinator</a>. Good article, although I was a bit disappointed nearing the end when I read about the problems with Webkit browsers and the :focus issue.

Originally posted by Tyssen:

It appears that the indirect sibling selector is actually now called the general sibling combinator. Good article, although I was a bit disappointed nearing the end when I read about the problems with Webkit browsers and the :focus issue.

Thank you very much! I'll correct the term as soon as I can. The Webkit issue was something I stumbled on while using Midori; I thought that it might be version of Webkit I was using [WebkitGTK+ 1.1.15] but I downloaded Chrome to check... same thing. So I would say it's not confirmed yet; I put it there as a warning. If someone who has Safari could test it to see if it works, that'd be great.

Originally posted by proghead:

The purpose is kinda flawed. Why would you want to hide stuff explicitly? Especially since clicking anywhere else, once the hidden area is shown, will make it collapse again.I would want to reveal stuff explicitly to have the starting layout less cluttered.

But if you look at the Wikipedia menu, the "flawed" purpose is exactly what it does - it shows the menu but you can hide it. I'm not saying it's perfect - but it's just a solution to problem that I've seen asked on quite a few forums over the last couple of years.

There's a part of the article where I switch the function round in an example [the third example, off the top of my head], so if you do want to do use it and modify, please read through it!

As also mentioned in the article, older browsers don't see the switch as it's buried in a media query; and as the menu starts out expanded they can still read the menu.

I can't remember whether I had initially investigated :visited, so I'll look into it {on looking at my original notes, it seems like I did. It won't work, since when you visit the link once it will remain in that state.}

I do mention at the end that a fix for the problems with :focus is to use :target [it's in the short note at the end of the article. in a highlighted box]. But that brings other problems. The real way around it is through scripting - which is beyond the scope of the article [which is why I said that this could be used as a non-script fall-back, in the introduction].

I was making (multilevel) dropdown menus that drop to the left, or up, and I couldn't get it to work with focus.
I didn't get why it wasn't working. I didn't know it was because I used a webkit browser.
Thank you for this little bit of information.

Eventually I ended up using hover.

2 advantages:
- It's one less button the user has to click!
- It's fast.

2 disadvantages:
- When the cursor is no longer inside the menu, the menu closes.
- This won't work on the ipad.

Corey, should you or anyone else be interested in those drop-up-left-down menus; they're written in html5 and css3.
No javascript. They aren't all online yet, give it a few weeks, but send me a note and I will let you know where they are on the web.
Maybe I should consider writing a small tutorial, I don't know, it's probably not necessary.

Hello there!

Originally posted by krislogin:

Corey, should you or anyone else be interested in those drop-up-left-down menus; they're written in html5 and css3.
No javascript. They aren't all online yet, give it a few weeks, but send me a note and I will let you know where they are on the web.
Maybe I should consider writing a small tutorial, I don't know, it's probably not necessary.

How does the HTML5 get involved? I think a decent tutorial is a good way forward - always necessary! So please let me know about them - it's always great to spread knowledge!

I didn't use :hover in this case, but I'm hoping it's fairly clear that you can just replace the pseudo-element as you wish - :hover, :focus or :target] - but they all have different pros and cons. It simply depends on how you want the switch to function - which will differ for each case. The advantage of using CSS3's general sibling combinator is that you can have the element that you want to alter away from the switch itself [as long as it's a sibling, of course], and it is that small thing that "makes the magic happen".

An update on Webkit - it apparently doesn't work in Safari 5, and on a short dig around Webkit, it was reported as a bug in 2008, but using :hover and then :checked -


https://bugs.webkit.org/show_bug.cgi?id=18027
https://bugs.webkit.org/show_bug.cgi?id=32695



It's been marked as minor and unconfirmed, so I don't know if they'll fix it. Sorry...

It's written in HTML5 because I didn't like using xHTML.
I think I used <section> and <nav> , it doesn't matter.
In xHTML that should be <div id="nav"> and <div id="section">
It won't be a problem.
But in one of my menus I do use advanced CSS, like rounded corners, text and box shadows, and that won't work in browsers like IE.

I will try to have it online by July 10.

It's cool but I don't think using :focus for this is good. Because if you move the focus (e.g. click somewhere else on the page) the block is shown again without it being intended.

Originally posted by smartmenus:

It's cool but I don't think using :focus for this is good. Because if you move the focus (e.g. click somewhere else on the page) the block is shown again without it being intended.

using :target insted makes more sense to me

<!DOCTYPE html>
<head>
   <title>menu mockup</title>
   <style type="text/css">
      .show {display: none; }
      .hide:target + .show {display: inline; }
      .hide:target {display: none; }
      .hide:target ~ .list {display:none; }
      @media print { .hide, .show { display: none; } }
    </style>
</head>
<body>
<p>Here's a list</p>
  <div>
    <a href="#hide" class="hide" id="hide">[hide]</a>
    <a href="#show" class="show" id="show">[show]</a>
    <ol class="list">
      <li>
        <a href="#hide2" class="hide" id="hide2">[hide]</a>
        <a href="#show2" class="show" id="show2">[show]</a>
        
item 1
        <ol class="list">
          <li>item 1.1</li>
          <li>item 1.2</li>
          <li>
            <a href="#hide3" class="hide" id="hide3">[hide]</a>
            <a href="#show3" class="show" id="show3">[show]</a>
            
item 1.3
            <ol class="list">
              <li>item 1.3.1</li>
              <li>item 1.3.2</li>
              <li>item 1.3.3</li>
              <li>item 1.3.4</li>
            </ol>
          </li>
          <li>item 1.4</li>
          <li>item 1.5</li>
        </ol>
      </li>
      <li>item 2</li>
      <li>item 3</li>
    </ol>
  </div>
<p>How about that?</p>
</body>
</html>

Update: the tutorial for the CSS multilevel dropdown menu (no javascript) is online, you can find the basic version here thissuitcase.com / multilevel.php
I wrote it in xHTML.
Contact me when you have any questions, or give me some feedback. Best, Kris

Originally posted by ipkisius:

using :target instead makes more sense to me

Yes, but as stated before, it depends on what you're doing. If you hem yourself into using one thing, you may find yourself using the wrong technique for a given situation.

The :focus mimics a real-life model, specifically clicking on a menu item in a toolbar [select the File menu in any program: then click/select out side the menu - the behaviour is the same].

If you need a menu that persists then :target is a good choice [as I mentioned]. If you want a menu that works like any menu item in a piece of software, :focus is more appropriate. If you need a quick temporary menu, :hover is a better choice. But with each of these, there are things to watch for... so it's about choosing the appropriate technique.

That's why I didn't write "this is the way you do this" or "this is the way that makes the most sense", because in some cases using :focus won't make sense. But then in some cases it makes perfect sense.

Does that all make sense?