WordPress TwentyFifteen submenu items to display when parent/sibling page is active

Question

To improve my WordPress TwentyFifteen child theme on GitHub, I would like submenu items to display when the parent/sibling page is active.

On startup, the menu should remain compact (as it currently does in TwentyFifteen), like this:

• Page 1
• Page 2
• Page 3

When the user opens any top-level page, the menu should auto-expand to reveal submenu items, like this:

• Page 1
  • subpage a
  • subpage b
• Page 2
• Page 3

Currently, these submenu items appear ONLY when the user clicks specifically on the menu down-arrow (a small icon that most users do not see). Instead, my goal is for submenu items to appear whenever the parent page is active.

There are related solutions that address similar issues, but not my issue in Twenty Fifteen:

• https://mpswp.wordpress.com/2015/06/27/twenty-fifteen-theme-reveals-hidden-submenus

Answer 1

@hareesh-sivasubramanian's answer is enough to get the menu displayed but doesn't "tell" Twenty Fifteen that the menu is open. Therefore, to close the submenu, you have to click the toggle button twice!

I fixed this by combining the accepted answer with a small custom jQuery to click the button so that it's toggled:

( function( $ ) {

    $( document ).ready( function() {
        $('.main-navigation .nav-menu > .current-menu-item > button').click();
    });

} )( jQuery );

Answer 2

Add this CSS to your stylesheet.

.main-navigation ul .current-menu-item ul {
    display: block;
}