Wordpress expand sub-menu when clicking on parent - php

Question

I am making a wordpress theme using _s as a basis. I am trying to style the menu. So far I don't have any particular CSS on the menu. I have looked at the (responsive) menu for the Twenty Sixteen theme, and I want to have the same the of menu, but only the "responsive" menu for smaller screens. On my site, the menu does not have to be responsive though. The menu (on smaller screens) looks like this, which is what I want:
Twenty Sixteen theme demo: https://twentysixteendemo.wordpress.com/ (You have to resize to a small screen to see the menu I am talking about)
I want that type of menu largely because it has the ability for a "expand/drop-down button" that can show sub-content in the menu.
So my question is: how can I style my menu so that it looks like the Twenty Sixteen theme's (mobile/tablet) menu including the button that expands the menu sub-categories?
I have searched the web for days without finding info on this. It seems every article that merely address the issue are just copy-paste of other badly explained articles.
This is the rendered HTML I have for my menu right now:
<ul id="primary-menu" class="main-menu"><li class="has-children menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1706">Group 1
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1707">Sub Group 1
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1708">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1709">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1710">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1711">Sub Group 2
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1712">Sub Group Level 3
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1713">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1714">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1715">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1730">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1731">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1718">Group 2
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1719">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1720">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1721">Group 3
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1722">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1723">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1724">Group 4
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1725">Sub Group 3
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1726">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1727">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1728">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1729">Image</li>
</ul>
</li>
</ul>
This is the menu in my header.php
<div class="menu-container">
<nav id="site-navigation" class="main-navigation" role="navigation">
<?php wp_nav_menu(array(
'theme_location' => 'primary',
'sort_column' => 'menu_order',
'menu' => 'Categories',
'container_class' => 'main-menu',
'menu_id' => 'primary-menu',
'menu_class' => 'main-menu'
) ); ?>
</nav><!-- #site-navigation -->
</div><!-- #menu-container -->
What my menu looks like now:

Answer 1

You can achieve this with javascript (jquery) or only with css.
Css example: https://codyhouse.co/gem/css-multi-level-accordion-menu/
jquery example: https://perishablepress.com/jquery-accordion-menu-tutorial/
hope this helps