<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>Accordion Component</title>
<!-- DEVELOPMENT & PRODUCTION -->
<link href="../ext/fa/css/font-awesome.min.css" rel="stylesheet" />
<!-- START DEVELOPMENT -->
<link href="../scss/wc.common.css" rel="stylesheet" />
<!-- END DEVELOPMENT -->
<!-- START PRODUCTION -->
<!-- <link href="../dist/wc.base.min.css" rel="stylesheet" /> -->
<!-- END PRODUCTION -->
</head>
<body style="margin-left:25px;margin-right:25px">
<div id="wc" style="padding:20px">
<div>
<wc-include url="/mtk/render?ajax=1&callback=ctrl::box&item=accordion"></wc-include>
</div>
<div class="row">
<div class="col-sm-6">
<div class="page-header" style="margin:0">
<h3>Accoridon <small>- uxcoe (default)</small></h3>
</div>
<!-- ///////////////////////////////////////////
///// ACTUAL COMPONENT CODE IS HERE
/////////////////////////////////////////// -->
<wc-accordion id="my-accordion-1" active="1" single="true" class="uxcoe">
<wc-panel id="my-panel-1" collapsible="true">
<wc-panel-header>My Panel I</wc-panel-header>
<wc-panel-body>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor
</wc-panel-body>
</wc-panel>
<wc-panel id="my-panel-2" collapsible="true">
<wc-panel-header>My Panel II</wc-panel-header>
<wc-panel-body>
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor
</wc-panel-body>
</wc-panel>
<wc-panel id="my-panel-3" collapsible="true">
<wc-panel-header>My Panel III</wc-panel-header>
<wc-panel-body>
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</wc-panel-body>
</wc-panel>
</wc-accordion>
</div>
<div class="col-sm-6">
<div class="page-header" style="margin:0">
<h3>Accoridon <small>- normal</small></h3>
</div>
<!-- ----------------------------- -->
<!-- ACTUAL COMPONENT CODE IS HERE -->
<!-- ----------------------------- -->
<wc-accordion id="my-accordion-2" active="1" single="true" class="normal">
<wc-panel id="my-panel-4" collapsible="true">
<wc-panel-header>My Panel I</wc-panel-header>
<wc-panel-body>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor
</wc-panel-body>
</wc-panel>
<wc-panel id="my-panel-4" collapsible="true">
<wc-panel-header>My Panel II</wc-panel-header>
<wc-panel-body>
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor
</wc-panel-body>
</wc-panel>
<wc-panel id="my-panel-6" collapsible="true">
<wc-panel-header>My Panel III</wc-panel-header>
<wc-panel-body>
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</wc-panel-body>
</wc-panel>
</wc-accordion>
</div>
</div>
<BR>
<!-- APPLICATION COLOR BLOCK -->
<div>
<wc-include url="/mtk/render?ajax=1&callback=ctrl::apps:old&cls=wc-accordion"></wc-include>
</div>
<hr>
<h5 style="color:indianred">DEVELOPER CONSOLE HAS A LOT OF GOODIES :)</h5>
</div>
<!-- START PRODUCTION -->
<!-- <script src="../dist/wc.base.min.js"></script>-->
<!-- END PRODUCTION -->
<!-- START DEVELOPMENT -->
<script src="../js/wc.common.min.js"></script>
<script>
logger.enableLogger();
yepnope({
test : /(msie) ([\w.]+)/.test(navigator.userAgent),// INTERNET EXPLORER
yep : ['../es5/include.js', '../es5/panel.js', '../es5/accordion.js'],
nope : ['../js/include.js', '../js/panel.js', '../js/accordion.js']
});
</script>
<!-- END DEVELOPMENT -->
</body>
</html>