Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You can do this with pure HTML if you use radio buttons.</p> <pre><code>&lt;ul&gt; &lt;li class='cat'&gt;cat 1 &lt;ul&gt; &lt;li&gt;&lt;input type='radio' name='n' id='n1'&gt;&lt;label for='n1'&gt;item 1&lt;/label&gt;&lt;/input&gt;&lt;/li&gt; &lt;li&gt;&lt;input type='radio' name='n' id='n2'&gt;&lt;label for='n2'&gt;item 2&lt;/label&gt;&lt;/input&gt;&lt;/li&gt; &lt;li&gt;&lt;input type='radio' name='n' id='n3'&gt;&lt;label for='n3'&gt;item 3&lt;/label&gt;&lt;/input&gt;&lt;/li&gt; &lt;li&gt;&lt;input type='radio' name='n' id='n4'&gt;&lt;label for='n4'&gt;item 4&lt;/label&gt;&lt;/input&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class='cat'&gt;cat 2 &lt;ul&gt; &lt;ul&gt; &lt;li&gt;&lt;input type='radio' name='n' id='n5'&gt;&lt;label for='n5'&gt;item 5&lt;/label&gt;&lt;/input&gt;&lt;/li&gt; &lt;li&gt;&lt;input type='radio' name='n' id='n6'&gt;&lt;label for='n6'&gt;item 6&lt;/label&gt;&lt;/input&gt;&lt;/li&gt; &lt;li&gt;&lt;input type='radio' name='n' id='n7'&gt;&lt;label for='n7'&gt;item 7&lt;/label&gt;&lt;/input&gt;&lt;/li&gt; &lt;li&gt;&lt;input type='radio' name='n' id='n8'&gt;&lt;label for='n8'&gt;item 8&lt;/label&gt;&lt;/input&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul class='subcat'&gt; &lt;li class='cat'&gt;Cat 3 &lt;ul&gt; &lt;li&gt;&lt;input type='radio' name='n' id='n9'&gt;&lt;label for='n9'&gt;item 9&lt;/label&gt;&lt;/input&gt;&lt;/li&gt; &lt;li&gt;&lt;input type='radio' name='n' id='n10'&gt;&lt;label for='n10'&gt;item 10&lt;/label&gt;&lt;/input&gt;&lt;/li&gt; &lt;li&gt;&lt;input type='radio' name='n' id='n11'&gt;&lt;label for='n11'&gt;item 11&lt;/label&gt;&lt;/input&gt;&lt;/li&gt; &lt;li&gt;&lt;input type='radio' name='n' id='n12'&gt;&lt;label for='n12'&gt;item 12&lt;/label&gt;&lt;/input&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class='cat'&gt; cat 4 &lt;ul&gt; &lt;li&gt;&lt;input type='radio' name='n' id='n13'&gt;&lt;label for='n13'&gt;item 13&lt;/label&gt;&lt;/input&gt;&lt;/li&gt; &lt;li&gt;&lt;input type='radio' name='n' id='n14'&gt;&lt;label for='n14'&gt;item 14&lt;/label&gt;&lt;/input&gt;&lt;/li&gt; &lt;li&gt;&lt;input type='radio' name='n' id='n15'&gt;&lt;label for='n15'&gt;item 15&lt;/label&gt;&lt;/input&gt;&lt;/li&gt; &lt;li&gt;&lt;input type='radio' name='n' id='n16'&gt;&lt;label for='n16'&gt;item 16&lt;/label&gt;&lt;/input&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload