Javascript modification – Open sidebar with custom button

Hi,

I am facing a very easy to fix problem, but because I have no idea about Java I am completely lost.

Bridge theme has a sidebar included as you can see in this Demo (3 stripes at the top of the screen).

I am looking into creating a button on the page with a class which will make the sidebar open. I already reached out to the support and got this answer:

Inside theme folder / js / default.js file search for this code http://screencast.com/t/Grg22YhLfLxs. The code is responsible for opening and closing sidebar, and you have to be able to use this function and to modify it according to your needs.

You can create button, and to specify ID like on screenshoot http://screencast.com/t/gWwzr4LHur (or create it on any other way but specify that ID). After that use its ID inside your function in order to target it, and you can add your modified function from Qode Options > General > Custom Code > Custom JS.

So I took a look at the default.js anf I think I found the code I snippet I need to modify:

var current_scroll;
function initSideMenu(){
	"use strict";

	if ($j('body').hasClass('side_area_uncovered_from_content')) {
		$j('.side_menu_button_wrapper a.side_menu_button_link,  a.close_side_menu').click(function(e){
			e.preventDefault();
			$j('.side_menu').css({'right':'0'});
			if(!$j('.side_menu_button_wrapper a.side_menu_button_link').hasClass('opened')){
				$j('.side_menu').css({'visibility':'visible'});
				$j(this).addClass('opened');
				$j('body').addClass('right_side_menu_opened');
				current_scroll = $j(window).scrollTop();

				$j(window).scroll(function() {
					if(Math.abs($scroll - current_scroll) > 400){
						$j('body').removeClass('right_side_menu_opened');
						$j('.side_menu_button_wrapper a').removeClass('opened');
						var hide_side_menu = setTimeout(function(){
							$j('.side_menu').css({'visibility':'hidden'});
							clearTimeout(hide_side_menu);
						},400);
					}
				});
			}else{
				$j('.side_menu_button_wrapper a.side_menu_button_link').removeClass('opened');
				$j('body').removeClass('right_side_menu_opened');
				var hide_side_menu = setTimeout(function(){
					$j('.side_menu').css({'visibility':'hidden'});
					clearTimeout(hide_side_menu);
				},400);
			}
		});
	}	

	if ($j('body').hasClass('side_menu_slide_with_content')) {
			$j('.side_menu_button_wrapper a.side_menu_button_link, a.close_side_menu').click(function(e){
			e.preventDefault();

			if(!$j('.side_menu_button_wrapper a.side_menu_button_link').hasClass('opened')){
				$j(this).addClass('opened');
				$j('body').addClass('side_menu_open');
				current_scroll = $j(window).scrollTop();
				$j(window).scroll(function() {

					if(Math.abs($scroll - current_scroll) > 400){
						$j('body').removeClass('side_menu_open');
						$j('.side_menu_button_wrapper a').removeClass('opened');
					}
				});
			}else{//hamburger icon has class open on its click
				$j('body').removeClass('side_menu_open');

				$j('.side_menu_button_wrapper a.side_menu_button_link').removeClass('opened');
				$j('body').removeClass('side_menu_open');

			}

			e.stopPropagation();
			$j('.wrapper').click(function() {
				e.preventDefault();
				$j('body').removeClass('side_menu_open');
				$j('.side_menu_button_wrapper a.side_menu_button_link').removeClass('opened');
				$j('body').removeClass('side_menu_open');
			});
		});
	}

	if ($j('body').hasClass('side_menu_slide_from_right')) {
			$j('.wrapper').prepend('<div class="cover"/>');
			$j('.side_menu_button_wrapper a.side_menu_button_link, a.close_side_menu').click(function(e){
			e.preventDefault();

			if(!$j('.side_menu_button_wrapper a.side_menu_button_link').hasClass('opened')){
				$j(this).addClass('opened');
				$j('body').addClass('right_side_menu_opened');

				$j(' .wrapper .cover').click(function() {
					$j('.side_menu_button_wrapper a.side_menu_button_link').removeClass('opened');
					$j('body').removeClass('right_side_menu_opened');
					$j('.side_menu_button_wrapper a').removeClass('opened');
				});
				current_scroll = $j(window).scrollTop();
				$j(window).scroll(function() {
					if(Math.abs($scroll - current_scroll) > 400){
						$j('body').removeClass('right_side_menu_opened');
						$j('.side_menu_button_wrapper a').removeClass('opened');
					}
				});
			}else{
				$j('.side_menu_button_wrapper a.side_menu_button_link').removeClass('opened');
				$j('body').removeClass('right_side_menu_opened');
			}
		});
	}
}

However, I have no idea how to do that. I need your guys’ help.
I would like the css class making the sidebar open to be side-open-button

Thank you for your help!