https://www.misawa-koushin.jp/js/toggle_wide.js

1$(function(){
2    var DURATION = 550;
3    
4    var $sidebar = $("#sidebar");
5    var $btn = $sidebar.find("button")
6        .on("click",function(){
7            
8            /*
9            toggleClass()メソッドはｍ
10            「引数に指定したクラス名(文字列)が、jQueryオブジェクト内の
11            要素のclass属性に指定されているかどうかを見て、
12            指定されていない場合は追加し、既に指定済なら削除するメソッド」です。
13            */
14            $sidebar.toggleClass("open");
15            
16            /*
17            hasclass()メソッドで条件分岐を行っています。
18            引数のクラス名(文字列)が、対象の要素に
19            含まれいる：true
20            含まれていない:false　を返すメソッドです。
21            
22            ボタンを押したら「div id="sidebar"」にclass="open"を追加してます。
23            そうすると、下の条件分岐が行われます。
24            
25            閉じるときにtoggle("open")が行われると、今度は、
26            class="open"は既に追加されているので,class="open"は
27            削除され、条件分岐の箇所でfalseが返されelse以降の
28            処理が行われます。
29            */
30            if( $sidebar.hasClass("open") ){
31                $sidebar.stop(true).animate({
32                    right:"0px"
33                },DURATION,"easeOutBack");
34                
35                /*
36                ボタンの画像を切り替える
37                imgタグ内のsrcの属性値を変更する。
38                今回は画像は使ってないので""空文字にしてます。
39                */
40                $btn.find("img")
41                .attr("src","");
42 
43                //画像を使わない場合はボタンの中のテキストを変更
44                $btn.text("CLOSE");
45            }else{
46                $sidebar.stop(true).animate({
47                    right:"-124px"
48                },DURATION,"easeInBack");
49 
50                /*
51                ボタンの画像を切り替える
52                imgタグ内のsrcの属性値を変更する。
53                今回は画像は使ってないので""空文字にしてます。
54                */
55                $btn.find("img")
56                .attr("src","");
57 
58                //画像を使わない場合はボタンの中のテキストを変更
59                $btn.text("OPEN");
60            };
61        });
62});