<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/desandro/pen/FHhEe?limit=all&page=34&q=Accordion" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">/* reset, prefix-free */
* { box-sizing: border-box; }
html, body {
height: 100%;
}
body {
font-family: sans-serif;
background: #555;
}
#accordion {
height: 100%;
max-width: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.panel {
position: absolute;
left: 0;
top: 0;
}
.panel-toolbar {
background: #333;
color: #CCC;
padding: 10px;
border-top: 1px solid #666;
border-bottom: 1px solid #111;
}
.panel-2 .panel-toolbar,
.panel-3 .panel-toolbar {
cursor: row-resize;
}
.panel-content {
height: 100px;
overflow-y: scroll;
padding: 0 10px;
color: white;
background: #444;
}
.panel-content p {
margin-bottom: 0.8em;
}
.is-dragging .panel-toolbar {
background: #700;
}</style></head><body>
<div id="accordion">
<div class="panel panel-1">
<header class="panel-toolbar">Toolbar</header>
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="panel panel-2">
<header class="panel-toolbar">Toolbar drag me</header>
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="panel panel-3">
<header class="panel-toolbar">Toolbar drag me</header>
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://draggabilly.desandro.com/draggabilly.pkgd.js'></script>
<script >$( function() {
// set initial panel position and content height
var $accordion = $('#accordion');
var accordionHeight = $accordion.innerHeight();
var panelHeight = accordionHeight / 3;
var toolbarHeight = $accordion.find('.panel-toolbar').outerHeight();
var $panelContents = $accordion.find('.panel-content');
var panelContentHeight = panelHeight - toolbarHeight;
// set initial content height
$panelContents.height( panelContentHeight );
var $panel1Content = $panelContents.eq(0);
var $panel2Content = $panelContents.eq(1);
var $panel3Content = $panelContents.eq(2);
var $panel2 = $('.panel-2').css({ top: panelHeight })
.draggabilly({
axis: 'y',
handle: '.panel-toolbar'
});
var draggie2 = $panel2.data('draggabilly');
draggie2.containDrag = function( axis, drag ) {
if ( axis === 'x' ) {
return drag;
}
var startY = draggie2.startPosition.y;
var min = toolbarHeight - startY;
var max = accordionHeight - startY - toolbarHeight * 2;
return Math.max( min, Math.min( max, drag ) );
}
var $panel3 = $('.panel-3').css({ top: panelHeight * 2 })
.draggabilly({
axis: 'y',
handle: '.panel-toolbar'
});
var draggie3 = $panel3.data('draggabilly');
draggie3.containDrag = function( axis, drag ) {
if ( axis === 'x' ) {
return drag;
}
var startY = draggie3.startPosition.y;
var min = toolbarHeight * 2 - startY;
var max = accordionHeight - startY - toolbarHeight;
return Math.max( min, Math.min( max, drag ) );
}
// position panel3 when panel2 is moving
draggie2.on( 'dragMove', function() {
var panel3Top = parseInt( $panel3.css('top'), 10 );
if ( panel3Top < draggie2.position.y + toolbarHeight ) {
panel3Top = draggie2.position.y + toolbarHeight;
$panel3.css({
top: panel3Top
});
}
resizePanelContents( draggie2.position.y, panel3Top );
});
// position panel3 when panel2 is moving
draggie3.on( 'dragMove', function() {
var panel2Top = parseInt( $panel2.css('top'), 10 );
if ( panel2Top + toolbarHeight > draggie3.position.y ) {
panel2Top = draggie3.position.y - toolbarHeight;
$panel2.css({
top: panel2Top
});
}
resizePanelContents( panel2Top, draggie3.position.y );
});
// resizes panel contents with the two positions
function resizePanelContents( panel2Y, panel3Y ) {
$panel1Content.height( panel2Y - toolbarHeight );
// size the panels
$panel2Content.height( panel3Y - panel2Y - toolbarHeight );
$panel3Content.height( accordionHeight - panel3Y - toolbarHeight );
}
});
//# sourceURL=pen.js
</script>
</body></html>
