Display toggle only when mobile screen is loaded

You could conditionally output different HTML based on the return of wp_is_mobile(), but from your description it’s not necessary. It can be managed much like how many themes manage mobile menus. When the screen is under a certain size, CSS media queries hide the usual menu items and display the hamburger menu icon. The visibility of menu items is then managed with JavaScript or jQuery that executes on click events, changing certain element attributes that result in the hiding or displaying of particular elements.

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.