Sidr Multipanel with Multiclose

sidr_example___functions.php

// Bring in the resources //
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.sidr/2.2.1/stylesheets/jquery.sidr.bare.css">
<script src="//cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js"></script>

// Make the '60%' Sidr and style it //
<style>
.hide-on-desktop { display: none; }
.sidr.left { width: 60%; }
.sidr.left { left: -60%; }
.sidr.left { padding: 5%; background: rgba(0, 128, 176, 0.08); border-style: ridge; border-width: 0px 2px 0px 0px; border-color: #127ba3; }
</style>

// Initialize Some Sidrs //
<script>
jQuery(document).ready(function($) {

$('#sdr_one').sidr({
name:'sdrone',
source:'#content_one'
});

$('#sdr_two').sidr({
name:'sdrtwo',
source:'http://example.com/'
});

$('#sdr_three').sidr({
name:'sdrthree',
source:'#content_three'
});

$('.sdrclose, .sidr-class-sdrclose').on('click', function(){
$.sidr('close', 'sdrone');
$.sidr('close', 'sdrtwo');
$.sidr('close', 'sdrthree');
});

});
</script>

// Make the universal Sidr closer element //
<div id="overlay" class="sdrclose"></div>

// Style the universal Sidr closer element //
<style>
div#overlay { position: absolute; position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: transparent; z-index: 999998; display: none; }
.sidr-open #overlay { display: block; }
p.sidr-class-sdrclose { float: right; border: 1px solid #000; padding: 1px 5px; border-radius: 2px; }
p.sidr-class-sdrclose:hover { cursor:pointer; }
.fa-right { float: right; margin-right: 25px; }
</style>

// Do the Sidrs //
<div class="ftcontent">
<h1>Title</h1>
<p>Content</p>
<a id="sdr_one" href="#sdr_one">Read More</a>
</div>

<div class="ftcontent">
<h1>Title</h1>
<p>Content</p>
<a id="sdr_two" href="#sdr_two">Read More</a>
</div>

<div class="ftcontent">
<h1>Title</h1>
<p>Content</p>
<a id="sdr_three" href="#sdr_three">Read More</a>
</div>

// Sider Content //
<div id="content_one" class="large">
<p class="sdrclose">Close</p>
Sed tortor enim, congue quis pharetra et, lobortis scelerisque est. senectus et netus et malesuada fames ac turpis egestas. Curabitur porta nunc a mi convallis ac rhoncus tellus ullamcorper. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo
<p class="sdrclose">Close</p>
</div>

// Sidr Two Content comes from another page! //

<div id="content_three" class="large">
<p class="sdrclose">Close</p>
Sed tortor enim, congue quis pharetra et, lobortis scelerisque est. senectus et netus et malesuada fames ac turpis egestas. Curabitur porta nunc a mi convallis ac rhoncus tellus ullamcorper. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo
<p class="sdrclose">Close</p>
</div>