Расширяемый древовидный список меню

Я хочу добиться следующего:

Я хочу иметь древовидный список, который будет отображаться в левой части страницы, когда элемент развернут , это элементы загружаются из базы данных (я могу выполнить эту часть), поэтому в основном это будет выглядеть так:

+Category1
+Category2
+Category3
+Category4

Когда пользователь нажимает на + , он будет показывать ниже, пока данные не будут захвачены из БД и добавлено на страницу:

+Category1
-Category2
    loading ...
+Category3
+Category4

После загрузки данных каждая подкатегория БУДЕТ иметь подкатегорию.

+Category1
-Category2
    +Sub-Cat1
    +Sub-Cat2
    +Sub-Cat3
    +Sub-Cat4
+Category3
+Category4

Как я могу этого добиться?

ПРИМЕЧАНИЕ: Я хочу знать, как поставить ( * или > или любой другой символ для списка, я считаю, что это CSS, но я вообще не работаю с дизайном !!)

Ваша помощь очень признательна .