Toggle a certain div with click on a trigger link (similar to mobile toggle) - with example CSS

toggle_div.js

  /* needs a link with class .drawer-toggle and a div .widget-drawer*/
  jQuery(document).ready(function(){
    jQuery(".drawer-toggle").click(function(){
    jQuery(".widget-drawer").slideToggle("slow");
    });
  });
  
//*Alternative version with auto-link in site-title area:

    ( function( $ ) {
    // Add a toggle button
    $( '.title-area' ).after( '<button id="dynadrawer-toggle-button" class="dynadrawer-toggle" role="button" aria-pressed="false"><span class="screen-reader-text">Menu</span></button>' );
    // Add an active class to dynadrawer-toggle when clicked and toggle the dynadrawer
    $( ".dynadrawer-toggle" ).click( function(e) {
    $( ".dynadrawer-toggle" ).toggleClass( "active" );
    $( ".dynadrawer" ).slideToggle( "slow" );
    } );
    } )( jQuery );

toggle_div_after_header.php

//* Register widget-aware widget area for Big menu 
genesis_register_sidebar( array(
	'id'			=> 'widget-drawer',
	'name'			=> __( 'Big Menu', 'dynamik-gen' ),
	'description'	=> __( 'This is the widget area for the big menu.', 'dynamik-gen' ),
) );

//* Count the number of widgets in a widget-area
function dynamik_count_sidebar_widgets( $sidebar_id ) {
    
    $the_widgets = wp_get_sidebars_widgets();
    
    if( isset( $the_widgets[$sidebar_id] ) ) {
        return count( $the_widgets[$sidebar_id] );
    }
}

//* Hook the widget-drawer-area to after_header
add_action( 'genesis_after_header', 'dynamik_big_menu', 10 );
function dynamik_big_menu() {
	
	    genesis_widget_area( 'widget-drawer', array(
        'before' => '<div class="widget-count-' . dynamik_count_sidebar_widgets( 'widget-drawer' ) . ' clearfix widget-drawer"><div class="widget-drawer-wrap dynamik-widget-area">',
        'after'  => '</div></div>',
    ) );


}

toggle_div_styles.css

 .widget-drawer {
background: #fff;
background: rgba(255, 255, 255, 0.95);
display: none;
position: absolute;
width: 100%;
z-index: 9999;
}