I have a list of items with a detailed description that I would like to be able to display or hide individually. My html currently looks like
<dl class="stuff">
<dt>title 1</dt>
<dd> this is the first item
<pre>
A hidden by default lengthy description
that should be copy and pastable
</pre>
</dd>
<dt>title 2</dt>
<dd> this is the second item
<pre>
Another lengthy description
</pre>
</dd>
</dl>
The answers to the question Hide Show content-list with only CSS, no javascript used were quite helpful in getting me started. The closest I got is https://jsfiddle.net/nja66om7/1/ which has all the desired behaviour, but requires creating a new id as soon as I add a new item to the list.
My target list would have dozens of items and new items would be added regularly. And although I could generate the html and the css code programmatically and obtain the desired behaviour, I would prefer to keep the css simple. Is there a way to achieve the same behaviour (or a similar one) without creating a new id for each item?
I would prefer not to resort to javascript.
