Hide elements with CSS only

[snowfinch27]

I encountered an interesting problem not long ago, and I want to share it. The problem: in the following markup without changing it or using JS, implement the behavior to show only the ul element of div which name is clicked in the first ul (before div). Name is content of li in top ul and it matches the content of the first li in ul you want to show. Elements that have {content} are just fillers and have no meaning for problem.

The markup:

<ul>
  <li class="head"><a href="#favorites">Favourite dishes</a></li>
  <li><a href="#breakfasts"><i>Breakfasts</i></a></li>
  <li><a href="#dinners"><i>Dinners</i></a></li>
  <li><a href="#suppers"><i>Suppers</i></a></li>
</ul>
<div>
    <ul id="breakfasts">
       <li class="head">Breakfasts</li>
       <li>{Breakfast 1}</li>
       <li>{Breakfast 2}</li>
       <li>{Breakfast 3}</li>
    </ul>
    <ul id="dinners">
       <li class="head">Dinners</li>
       <li>{Dinner 1}</li>
       <li>{Dinner 2}</li>
       <li>{Dinner 3}</li>
    </ul>
    <ul id="suppers">
       <li class="head">Dinners</li>
       <li>{Supper 1}</li>
       <li>{Supper 2}</li>
       <li>{Supper 3}</li>
    </ul>
    <ul class="favorites">
       <li class="head">Favourites</li>
       <li>{Favourite 1}</li>
       <li>{Favourite 2}</li>
       <li>{Favourite 3}</li>
    </ul>
</div>

Hint: you have to use :target pseudo-class.

[Paulie_D]

We don’t take challenges…this feels like we’re doing your homework!

What have you tried?

[snowfinch27]

Ok, sorry, I didn’t want it to look so, this what I came up with:

div  >  ul:target{
   display: block;
}

div  > ul{
   display: none;
}

But with this CSS if I click the first element, nothing is shown, although, it’s possible

[Paulie_D]

You were using a class on “Favourites” instead of an ID

http://codepen.io/Paulie-D/pen/KrYQEk

[Author]

Posts