Each item on this list contains a hidden box that should be shown after it is clicked. However, the issue arises when expanding one item causes other items to expand as well.
Refer to the image for clarification: Image Link
Is there a way to only expand the specific item that was clicked?
<li>
user name test
<div class="content">
<span>
A card can be used to display content related to
a single subject. The content can consist of multiple
elements of varying types and sizes.
</span>
</div>
</li>
<li>
user name test
<div class="content">
<span>
Another example of the content within a card element.
</span>
</div>
</li>
View Demo Here: Demo Link