Title: Javascript modification – Open sidebar with custom button
Last modified: August 30, 2016

---

# Javascript modification – Open sidebar with custom button

 *  [FelixHansar](https://wordpress.org/support/users/felixhansar/)
 * (@felixhansar)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/theme-bridge-javascript-modification-open-sidebar-with-custom-button-1/)
 * Hi,
 * I am facing a very easy to fix problem, but because I have no idea about Java
   I am completely lost.
 * [Bridge theme](http://demo.qodeinteractive.com/bridgetour/) has a sidebar included
   as you can see in this [Demo](http://demo.qodeinteractive.com/bridge3/) (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](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](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!

Viewing 1 replies (of 1 total)

 *  [Joey](https://wordpress.org/support/users/leglesslizard/)
 * (@leglesslizard)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/theme-bridge-javascript-modification-open-sidebar-with-custom-button-1/#post-6801505)
 * Hey,
 * This line of code here
    `$j('.side_menu_button_wrapper a.side_menu_button_link,
   a.close_side_menu').click(function(e){` is looking at the selectors “side_menu_button_wrapper
   a.side_menu_button_link” and “a.close_side_menu” and carrying out the functionality
   below it if they are clicked.
 * Can you just add your class into that list so that it does the same thing? Like
   so:
    `$j('.side_menu_button_wrapper a.side_menu_button_link, a.close_side_menu,.
   side-open-button').click(function(e){`
 * Bear in mind its not a great idea to modify theme files directly and you should
   look into [creating a child theme](https://codex.wordpress.org/Child_Themes) 
   to handle any custom modifications you make.
 * Hope that helps! Good luck!

Viewing 1 replies (of 1 total)

The topic ‘Javascript modification – Open sidebar with custom button’ is closed 
to new replies.

## Tags

 * [Coding](https://wordpress.org/support/topic-tag/coding/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [sidebar](https://wordpress.org/support/topic-tag/sidebar/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 1 reply
 * 2 participants
 * Last reply from: [Joey](https://wordpress.org/support/users/leglesslizard/)
 * Last activity: [10 years, 5 months ago](https://wordpress.org/support/topic/theme-bridge-javascript-modification-open-sidebar-with-custom-button-1/#post-6801505)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics