Slider not appearing <p>So I'm working on a website and I need a drawer on the left side and on the right side. First, I've made the left one and it seems to be working great so I've decided to copy it and change the names and the CSS in order to make the same one appear on the right side, but it isn't showing at all.. I might've made a small mistake, I might've made a big one, but I can not find it. Hopefully some of ya'll could help me out with this. It's practically an X in the left corner of the window which slides in the drawer with info and the same thing should be for the right side as well.</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() { $(".trigger-left").click(function() { $(".panel-slide-left").toggle("fast"); $(this).toggleClass("active"); return false; }); }); $(document).ready(function() { $(".trigger-right").click(function() { $(".panel-slide-right").toggle("fast"); $(this).toggleClass("active"); return false; }); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.panel-slide-right { position: absolute; right: 0; display: none; background-color: #edf2f4; width: 330px; height: 100%; padding-left: 50px; padding-top: 50px; } .panel-slide-left p { margin: 0 0 15px; padding: 0; color: #ccc; } .panel-slide-right p { margin: 0 0 15px; padding: 0; color: #ccc; } .panel-slide-left a:hover, .panel-slide-left a:visited:hover { margin: 0; padding: 0; color: #fff; text-decoration: none; border-bottom: 1px solid #fff; } .panel-slide-left a:hover, .panel-slide-left a:visited:hover { margin: 0; padding: 0; color: #fff; text-decoration: none; border-bottom: 1px solid #fff; } a.trigger-left { position: absolute; text-decoration: none; top: 50px; left: 0; font-size: 16px; letter-spacing: -1px; font-family: verdana, helvetica, arial, sans-serif; color: #fff; padding-left: 20px; font-weight: 700; display: block; } a.trigger-right { position: absolute; top: 50px; right: 0; top: 50px; left: 0; font-size: 16px; letter-spacing: -1px; font-family: verdana, helvetica, arial, sans-serif; color: #fff; padding-left: 20px; font-weight: 700; display: block; } a.trigger-left:hover { position: absolute; text-decoration: none; top: 50px; left: 0; font-size: 16px; letter-spacing: -1px; font-family: verdana, helvetica, arial, sans-serif; color: #fff; padding-left: 20px; font-weight: 700; display: block; height: 50px; } a.trigger-right:hover { position: absolute; text-decoration: none; top: 50px; right: 0; font-size: 16px; letter-spacing: -1px; font-family: verdana, helvetica, arial, sans-serif; color: #fff; padding-left: 20px; font-weight: 700; display: block; height: 50px; } a.active.trigger-left { color: #fff; } a.active.trigger-right { color: #fff; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt; &lt;div class="panel-slide-left"&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt; &lt;div class="columns"&gt; &lt;div class="colcenter"&gt; &lt;div class="checkbox"&gt; &lt;label&gt; &lt;input type="checkbox" value=""&gt; &lt;h5&gt;Broadcast Language English&lt;/h5&gt; &lt;/label&gt; &lt;/div&gt; &lt;div class="checkbox"&gt; &lt;label&gt; &lt;input type="checkbox" value=""&gt; &lt;h5&gt;Stream Language English&lt;/h5&gt; &lt;/label&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;a class="trigger-left" href="#"&gt;X&lt;/a&gt; &lt;div class="panel-slide-right"&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt; &lt;div class="columns"&gt; &lt;div class="colcenter"&gt; &lt;div class="checkbox"&gt; &lt;label&gt; &lt;input type="checkbox" value=""&gt; &lt;h5&gt;Broadcast Language English&lt;/h5&gt; &lt;/label&gt; &lt;/div&gt; &lt;div class="checkbox"&gt; &lt;label&gt; &lt;input type="checkbox" value=""&gt; &lt;h5&gt;Stream Language English&lt;/h5&gt; &lt;/label&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="clear:both;"&gt; &lt;/div&gt; &lt;a class="trigger-right" href="#"&gt;X&lt;/a&gt;</code></pre> </div> </div> </p>