Such menu structures are usually organized as hierarchical ul/li elements, but you can use any system that makes sense for your application. With menus, for small screens, all the menu items are hidden by default. When the hamburger icon is clicked, a class like “first-menu” is assigned to top level menu items. That class causes the menu items containing it to be displayed. When a menu item is clicked with sub-menus, its children are assigned another class, like “second-menu”, which causes these items to be displayed on a higher level and somewhat to the right.

When no submenu exists, the associated link is followed. Apply the same sort of logic to your list items. There is a jQuery module named “accordion” which applies the same sort of menu visibility logic to list items like you are using. As long as your list items are properly structured with the appropriate classes, the accordion module can be applied. You can chose to not load the module if wp_is_mobile() returns false, then the list will appear normally.