See example: Drawer - Dual Slide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CLUI</title>
<link rel="shortcut icon" href="static/favicon.png"/>
<!-- CSS to be documented -->
<link rel="stylesheet" href="css/corelogic-ui.css">
<!-- Main libraries -->
<script src="js/vendor/jquery.min.js"></script>
<script src="js/corelogic-ui.min.js"></script>
</head>
<body class="min-width-1170 hide-overflow-x">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-collapse-btn">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-header">
<div class="navbar-logo"></div>
<div class="application-name">
<h1>CoreLogic UI</h1>
</div>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="/components_-_drawer.html?page=drawer">Back To CLUI</a></li>
</ul>
<form class="navbar-form navbar-search">
<div class="form-group">
<div class="input-group">
<label class="sr-only" for="navSearch">Search for an address...</label>
<input class="form-control" id="navSearch" placeholder="Search for an address..."/>
<i class="fa fa-search left-icon"></i>
</div>
</div>
</form>
</div>
</div>
</nav>
<div class="secondary-nav">
<div class="container-fluid">
<ul class="secondary-tabs">
<li class="active"><a class="secondary-tab" href="#">Secondary</a></li>
<li><a class="secondary-tab" href="#">Navigation</a></li>
<li><a class="secondary-tab" href="#">Element</a></li>
<li><a class="secondary-tab" href="#">Example</a></li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="row no-gutter">
<div class="drawer-md-fixed drawer-slide">
<div class="drawer-left">
<div class="toggleButton"><i class="fa fa-caret-left"></i></div>
<div class="drawer">
<div class="drawer-header">
<h2>Joe's Ice Cream</h2>
</div>
<div class="drawer-body">
<div class="drawer-column">
<div class="container-fluid">
<div class="row mg-bt-15">
<h2>MENU</h2>
</div>
<div class="row mg-bt-15 vertical-parent">
<div class="col-xs-10">
<label class="p" for="toggle-demo1">Ice Cream</label>
</div>
<div class="vertical-center right text-right col-xs-2">
<div class="toggle-container">
<input id="toggle-demo1" class="cl-toggle toggle-green" type="checkbox"
name="toggle-demo1" onclick="window.clui.toggleSecondaryDrawer();"/>
<label for="toggle-demo1"></label>
</div>
</div>
</div>
<div class="row mg-bt-15 vertical-parent">
<div class="col-xs-10">
<label class="p" for="toggle-demo7">Milkshake</label>
</div>
<div class="vertical-center right text-right col-xs-2">
<div class="toggle-container">
<input id="toggle-demo7" class="cl-toggle toggle-green" type="checkbox"
name="toggle-demo7"/>
<label for="toggle-demo7"></label>
</div>
</div>
</div>
<div class="row mg-bt-15 vertical-parent">
<div class="col-xs-10">
<label class="p" for="toggle-demo8">Root Beer Float</label>
</div>
<div class="vertical-center right text-right col-xs-2">
<div class="toggle-container">
<input id="toggle-demo8" class="cl-toggle toggle-green" type="checkbox"
name="toggle-demo8"/>
<label for="toggle-demo8"></label>
</div>
</div>
</div>
</div>
</div>
<div class="drawer-column">
<div class="container-fluid">
<div class="row mg-bt-15">
<h2>FLAVORS</h2>
</div>
<div class="row mg-bt-15 vertical-parent">
<div class="col-xs-10">
<label class="p" for="toggle-demo3">Chocolate</label>
</div>
<div class="vertical-center right text-right col-xs-2">
<div class="toggle-container">
<input id="toggle-demo3" class="cl-toggle toggle-black" type="checkbox"
name="toggle-demo3"/>
<label for="toggle-demo3"></label>
</div>
</div>
</div>
<div class="row mg-bt-15 vertical-parent">
<div class="col-xs-10">
<label class="p" for="toggle-demo4">Vanilla</label>
</div>
<div class="vertical-center right text-right col-xs-2">
<div class="toggle-container">
<input id="toggle-demo4" class="cl-toggle toggle-yellow" type="checkbox"
name="toggle-demo4"/>
<label for="toggle-demo4"></label>
</div>
</div>
</div>
<div class="row mg-bt-15 vertical-parent">
<div class="col-xs-10">
<label class="p" for="toggle-demo5">Strawberry</label>
</div>
<div class="vertical-center right text-right col-xs-2">
<div class="toggle-container">
<input id="toggle-demo5" class="cl-toggle toggle-red" type="checkbox"
name="toggle-demo5"/>
<label for="toggle-demo5"></label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="drawer-footer">
<button class="btn btn-primary">Place Order</button>
</div>
</div>
</div>
<div class="drawer-right">
<div class="container-full container-background no-top"
style="background-image: url('https://placekitten.com/g/800/800')">
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('.toggleButton').on('click', window.clui.toggleDrawer);
window.clui.autoCompleteInit('#navSearch', {
minLength: 2,
source: function (request, response) {
var settings = {
async: true,
url: "https://clp-typeahead-service-int.clgxlabs.net/autocomplete",
crossDomain: true,
data: {
input: request.term
},
method: "GET"
};
$.ajax(settings).done(function (data) {
response($.map(data.result_set, function (item) {
return {
label: item.address,
value: item.address
};
}));
});
}
});
})
</script>
</body>
</html>