Is there a method to dynamically load content into a sliding panel?
For instance, I would like to populate the panel with news articles when it is toggled open and have more content load as the user scrolls down.
You can see an example of a slide panel here: http://example.com. When the panel is activated, the news articles should be visible.
HTML:
<div class="sidebar">
<div class="toggle"></div>
</div>
jQuery:
$('.toggle').on('click', function() {
$('.sidebar').toggleClass("sidebar-collapsed");
});
CSS:
.sidebar, .toggle {
transition:all .5s ease-in-out;
-webkit-transition:all .5s ease-in-out;
}
.sidebar {
background:lightgrey;
width:200px;
height:100vh;
position:absolute;
top:0;
left:0;
}
.toggle {
position:absolute;
right:5px;
top:5px;
width:30px;
height:30px;
background:black;
}
.sidebar-collapsed {
transform:translateX(-100%);
-webkit-transform:translateX(-100%);
}
.sidebar-collapsed .toggle {
right:-5px;
transform:translateX(100%);
-webkit-transform:translateX(100%);
}