xxxxxxxxxx1
<button type="button" class="btn btn-outline-primary waves-effect" id="IndexButtonRightPanel">>></button>2
3
<div class="fade IndexRightPanel">4
<div class="special-color-dark">5
<button type="button" class="close" id="IndexCloseButtonRightPanel">6
<span aria-hidden="true">×</span>7
</button>8
</div>9
10
</div>xxxxxxxxxx1
.IndexRightPanel {2
display: block; 3
overflow: hidden; 4
padding-left: 0px; 5
position: fixed; 6
top:0; 7
right: 0; 8
bottom: 0; 9
width: 400px;10
z-index: 1050; 11
background-color: white;12
visibility: hidden;13
border-left: 1px solid #e6e6e6;14
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);15
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.10), 0 2px 10px 0 rgba(0, 0, 0, 0.12);16
}17
18
.IndexRightPanel .special-color-dark19
{20
width: 100%;21
text-align: right;22
height: 56px;23
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);24
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.10), 0 2px 10px 0 rgba(0, 0, 0, 0.12);25
}26
27
.IndexRightPanel .special-color-dark .close28
{29
padding: 16px !important;30
color: #ffffff !important;31
text-shadow: 1px 1px 0 #808080 !important;32
}33
xxxxxxxxxx1
$('#IndexButtonRightPanel').click(function() { // button to show the right panel2
var p = $('.IndexRightPanel');3
if (!p) exit;4
p.css('visibility', 'visible');5
p.addClass('show');6
}); 7
8
$('#IndexCloseButtonRightPanel').click(function() { // button to hide the right panel9
var p = $('.IndexRightPanel');10
if (!p) exit;11
p.removeClass('show');12
p.css('visibility', 'hidden');13
}); 14
Console errors: 0