Home » Jquery » jquery – Hide all list items except one when collapsed and show all when expanded in JavaScript

jquery – Hide all list items except one when collapsed and show all when expanded in JavaScript

Posted by: admin February 22, 2020 Leave a comment

Questions:

Suppose I do have a <ul> like

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>

Now , I want it to be collapsible. But when collapsed, I want it only show selected <li>.

But when expanded, it can show all.

Something like below UX which I received, the connections panel shows the selected connection,

But when expanded it shows all.

enter image description here

And when expanded

enter image description here

Does HTML has any support for that ?

How to&Answer: