1
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.
4Note, I don't believe this is off-topic, as it looks like a [tag:programming-puzzle] to me – Nathan Merrill – 2016-08-19T18:11:35.977
2@NathanMerill Programming puzzle or not, it still needs an objective winning criterion. – Dennis – 2016-08-19T18:20:22.437
@Dennis isn't it first posted by default? – Nathan Merrill – 2016-08-19T18:26:15.830
@NathanMerrill Amended: first corrected posted – Conor O'Brien – 2016-08-19T18:26:53.350
2@NathanMerrill As far as I know, no. The tag doesn't even have a wiki. – Dennis – 2016-08-19T18:31:49.070