1
\$\begingroup\$

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">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>

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. Hint: you have to use :target pseudo-class.

\$\endgroup\$
5
  • 4
    \$\begingroup\$ Note, I don't believe this is off-topic, as it looks like a programming-puzzle to me \$\endgroup\$ Commented Aug 19, 2016 at 18:11
  • 2
    \$\begingroup\$ @NathanMerill Programming puzzle or not, it still needs an objective winning criterion. \$\endgroup\$
    – Dennis
    Commented Aug 19, 2016 at 18:20
  • \$\begingroup\$ @Dennis isn't it first posted by default? \$\endgroup\$ Commented Aug 19, 2016 at 18:26
  • \$\begingroup\$ @NathanMerrill Amended: first corrected posted \$\endgroup\$ Commented Aug 19, 2016 at 18:26
  • 2
    \$\begingroup\$ @NathanMerrill As far as I know, no. The tag doesn't even have a wiki. \$\endgroup\$
    – Dennis
    Commented Aug 19, 2016 at 18:31

1 Answer 1

1
\$\begingroup\$

I think your hint gave too much away:

div>ul:target{
   display: block;
}
div>ul{
   display: none;
}
\$\endgroup\$
1
  • \$\begingroup\$ thanks for proposing a solution, it's almost it, but if I click the "Favourite dishes", nothing is shown \$\endgroup\$ Commented Aug 19, 2016 at 18:21

Not the answer you're looking for? Browse other questions tagged or ask your own question.