[Theme: Twenty Fourteen] Replicated Search Toggle – overlaying problem

Hey guys,

Working on a twentyfourteen child theme, i have replicated the toggle effect used for the search function in the top right corner of the fixed header (desktop view).
Since i’m not very good at writing my own javascript i’m calling you for help.

Problem: To prevent the search-box and the new-box to be opened simultaneously, therefore overlaying each other, i would like to close the respective “active” box.

Here is the javascript for each box. (same for ‘new’=’search’)

// New toggle.
$( '.new-toggle' ).on( 'click.twentyfourteen', function( event ) {
	var that    = $( this ),
	wrapper = $( '.new-box-wrapper' );

	that.toggleClass( 'active' );
	wrapper.toggleClass( 'hide' );
} );

I appreciate your help.