YJSG template framework comes with built in accordion side menu that you can take advantage of. To activate accordion menu, go to your Menu Module manager, tab name Yjsg Menu Options and from parameter Select menu type, select either Accordion or Accordion no toggle;
Toggle or no toggle
Main difference between Accordion and Accordion no toggle is that Accordion no toggle can display all menu levels but the selected level will not collapse previously opened accordion. Where Accordion will collapse the previously opened accordion but it can display maximum of End level 2 menu items.
Next click on Module tab and select the End level. Read info above to make easier decision.
Your accordion menu is setup. Please remember to publish it in any module position you like. When you click the parent menu item it's child elements will slide down. Demo can be seen
Accordion menu items styling
Once the accordion menu is activated there are few CSS class names that you can use to style your menu items. Depending on state ( open/closed )
the toggler ( parent menu item ) gets additional class name: