snowfinch27 snowfinch27 - 3 months ago 5
CSS Question

Hide elements with CSS only

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.

<ul>
<li class="head"><a href="#favorites">Favourites</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>


This problem really has the solution and was very interesting for me, so I decided to post it here even if it's not very practical.

The following implementation solves almost solves the problem, but it's not showing the "Favourites" element if first
li
is clicked. So, is there a way to add this functional with CSS only?

div > ul:target{
display: block;
}

div > ul{
display: none;
}

Answer

There is no way to do it only with CSS. Because you need an id for that element.

change this:

<ul class="favorites">

to this:

<ul id="favorites" class="favorites">

div > ul:target{
   display: block;
}

div > ul{
   display: none;
}
<ul>
  <li class="head"><a href="#favorites">Favourites</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 id="favorites" class="favorites">
       <li class="head">Favourites</li>
       <li>{Favourite 1}</li>
       <li>{Favourite 2}</li>
       <li>{Favourite 3}</li>
    </ul>
</div>

But, if you have to keep the current HTML format, you need to add the id by JavaScript:

var favs = document.getElementsByClassName("favorites");
favs[0].setAttribute('id', 'favorites');
div > ul:target{
   display: block;
}

div > ul{
   display: none;
}
<ul>
  <li class="head"><a href="#favorites">Favourites</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>

Comments