Make this css code into collapsible/expandable list

This is my code. I want to convert or change/add this css code to collapsible/expandable list for categories without changing their names of the classes & id's names. As Main Category bullet/bullet image must be used to create collapsible/expandable list to its under all sub categories. All Main Categories & Sub-Categories should have their respective hyperlinks
Do not change the look of it. If possible add to that class or id.

HTML:

<style type=‘text/css’>

#directory .catcol…

Make this css code into collapsible/expandable list

See original post by taj1504