滑块不出现

Question

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.

 $(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; }); }); 

 .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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel-slide-left"> <div style="clear:both;"></div> <div class="columns"> <div class="colcenter"> <div class="checkbox"> <label> <input type="checkbox" value=""> <h5>Broadcast Language English</h5> </label> </div> <div class="checkbox"> <label> <input type="checkbox" value=""> <h5>Stream Language English</h5> </label> </div> </div> </div> <div style="clear:both;"></div> </div> <a class="trigger-left" href="#">X</a> <div class="panel-slide-right"> <div style="clear:both;"></div> <div class="columns"> <div class="colcenter"> <div class="checkbox"> <label> <input type="checkbox" value=""> <h5>Broadcast Language English</h5> </label> </div> <div class="checkbox"> <label> <input type="checkbox" value=""> <h5>Stream Language English</h5> </label> </div> </div> </div> <div style="clear:both;"> </div> <a class="trigger-right" href="#">X</a> 

Answer 1

Your code snippet isn't working very well, so difficult to fix it for you. But I imagine it would work if you moved everything into one $(document).ready(function() {

You're also missing a closing div on the right panel after the clear-fix. That could be the problem actually.

Answer 2

I simplified the code and fixed some bugs.

 $(document).ready(function() { $(".trigger-left").click(function() { $(".panel-slide-left").toggle("fast"); $(this).toggleClass("active"); return false; }); $(".trigger-right").click(function() { $(".panel-slide-right").toggle("fast"); $(this).toggleClass("active"); return false; }); }); 

 .columns { padding: 50px; } label > h5 { display: inline-block; } .panel-slide-left, .panel-slide-right { position: absolute; display: none; background-color: #edf2f4; width: 330px; height: 100%; top: 0; } .panel-slide-left { left: 0; } .panel-slide-right { right: 0; } .panel-slide-left p, .panel-slide-right p { margin: 0 0 15px; padding: 0; color: #ccc; } .panel-slide-left a:hover, .panel-slide-left a:visited:hover, .panel-slide-right a:hover, .panel-slide-right a:visited:hover { margin: 0; padding: 0; color: #fff; text-decoration: none; border-bottom: 1px solid #fff; } a.trigger-left, a.trigger-left:hover, a.trigger-right, a.trigger-right:hover { position: absolute; text-decoration: none; top: 50px; font-size: 16px; letter-spacing: -1px; font-family: verdana, helvetica, arial, sans-serif; font-weight: 700; display: block; } a.trigger-left, a.trigger-left:hover { left: 0; padding-left: 20px; } a.trigger-right, a.trigger-right:hover { right: 0; padding-right: 20px; } a.active.trigger-left, a.active.trigger-right { color: #fff; } 

 <div class="panel-slide-left"> <div class="columns"> <div class="colcenter"> <div class="checkbox"> <label> <input type="checkbox" value=""> <h5>Broadcast Language English</h5> </label> </div> <div class="checkbox"> <label> <input type="checkbox" value=""> <h5>Stream Language English</h5> </label> </div> </div> </div> </div> <a class="trigger-left" href="#">X</a> <div class="panel-slide-right"> <div class="columns"> <div class="colcenter"> <div class="checkbox"> <label> <input type="checkbox" value=""> <h5>Broadcast Language English</h5> </label> </div> <div class="checkbox"> <label> <input type="checkbox" value=""> <h5>Stream Language English</h5> </label> </div> </div> </div> </div> <a class="trigger-right" href="#">X</a> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>