<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h3>Show casing Martin's Animated Horizontal Accordion working in Moodle 3.3.3</h3>
<h3>http://experiments.wemakesites.net/animated-css3-only-horizontal-accordion.html</h3>
<h3>Add the CSS to your Site administration Appearance\Themes\YOUR THEME\Custom\CSS & JS</h3>
<h3>https://material.io/color/#!/?view.left=0&view.right=0&primary.color=1A237E</h3>
</div>
<!-- Start of content block -->
<div class="editor-indent" style="margin-left: 20px; padding: 0 0 0 40px; margin-right: 50px">
<div class="acidjs-horizontal-accordion">
<form>
<ul>
<li>
<input type="radio" name="group-01" id="group-01-01" />
<label for="group-01-01">About Us</label>
<div>
<h3>About Us</h3>
<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.</p>
</div>
</li>
<li>
<input type="radio" name="group-01" id="group-01-02" checked="checked" />
<label for="group-01-02">Our Mission</label>
<div>
<h3>Our Mission</h3>
<p>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>
</li>
<li>
<input type="radio" name="group-01" id="group-01-03" />
<label for="group-01-03">Customers</label>
<div>
<h3>Customers</h3>
<p>Sed ut perspiciatis unde omnis iste natus error
sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo</p>
</div>
</li>
<li>
<input type="radio" name="group-01" id="group-01-04" />
<label for="group-01-04">Contact Us</label>
<div>
<h3>Contact Us</h3>
<p>Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt.</p>
</div>
</li>
<li>
<input type="radio" name="group-01" id="group-01-05" />
<label for="group-01-05">Achievements</label>
<div>
<h3>Achievements</h3>
<p>Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam
quaerat voluptatem.</p>
</div>
</li>
<li>
<input type="radio" name="group-01" id="group-01-06" />
<label for="group-01-06">Portfolio</label>
<div>
<h3>Portfolio</h3>
<p>At vero eos et accusamus et iusto odio dignissimos
ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores et quas
molestias excepturi sint occaecati cupiditate
non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum
et dolorum fuga. </p>
</div>
</li>
</ul>
</form>
</div>
.acidjs-horizontal-accordion,
.acidjs-horizontal-accordion > form > ul > li > div,
.acidjs-horizontal-accordion > form > ul > li > label
{
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.acidjs-horizontal-accordion > form > ul,
.acidjs-horizontal-accordion > form > ul > *
{
margin: 0;
padding: 0;
list-style: none;
}
.acidjs-horizontal-accordion > form > ul,
.acidjs-horizontal-accordion > form > ul > li > div
{
height: 159px; /* height of the accordion */
}
.acidjs-horizontal-accordion,
.acidjs-horizontal-accordion > form > ul > li > input:checked + label
{
background: #eeeeee;
}
.acidjs-horizontal-accordion > form > ul > li > input,
.acidjs-horizontal-accordion > form > ul > li > label
{
position: absolute;
}
.acidjs-horizontal-accordion > form > ul > li,
.acidjs-horizontal-accordion > form > ul > li:last-child
{
border: solid 1px rgba(255,255, 255, .75);
}
.acidjs-horizontal-accordion > form > ul > li > div,
.acidjs-horizontal-accordion > form > ul > li > input
{
opacity: 0; /* we hide the radio button with opacity and position: absolute in order to preserve the keyboard arrow navigation */
}
.acidjs-horizontal-accordion
{
width: 964px;
font-family: Arial, Helvetica, Sans-serif;
padding: 1px;
cursor: default;
}
.acidjs-horizontal-accordion > form > ul > li > label
{
display: block;
width: 159px; /* height of the accordion button */
padding: 0 8px;
letter-spacing: 1px;
font: bold 14px/32px "Arial Rounded MT", Arial, Helvetica, Sans-serif;
background: #0d47a1;
color: #ffffff;
text-align: right;
cursor: pointer;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
text-overflow: ellipsis;
white-space: nowrap;
-webkit-transition: all .3s cubic-bezier(.09, .11, .24, .91);
-moz-transition: all .3s cubic-bezier(.09, .11, .24, .91);
-ms-transition: all .3s cubic-bezier(.09, .11, .24, .91);
-o-transition: all .3s cubic-bezier(.09, .11, .24, .91);
transition: all .3s cubic-bezier(.09, .11, .24, .91);
-webkit-transform: translateX(-100%) rotate(-90deg);
-moz-transform: translateX(-100%) rotate(-90deg);
-ms-transform: translateX(-100%) rotate(-90deg);
-o-transform: translateX(-100%) rotate(-90deg);
transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform-origin: right top;
-ms-transform-origin: right top;
-o-transform-origin: right top;
transform-origin: right top;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.acidjs-horizontal-accordion > form > ul > li > input:not(:checked) + label:hover
{
background: #e02f1c;
}
.acidjs-horizontal-accordion > form > ul > li > input:checked + label
{
border-bottom-color: transparent;
color: rgba(255, 255, 255, .5);
}
.acidjs-horizontal-accordion > form > ul > li
{
float: left;
padding: 0 32px 0 0;
border-right: 0;
}
.acidjs-horizontal-accordion > form > ul > li > div
{
width: 0;
font-size: 10px;
color: #ffffff;
margin: 0 -32px 0 32px;
-webkit-transition: all .3s cubic-bezier(.09, .11, .24, .91);
-moz-transition: all .3s cubic-bezier(.09, .11, .24, .91);
-ms-transition: all .3s cubic-bezier(.09, .11, .24, .91);
-o-transition: all .3s cubic-bezier(.09, .11, .24, .91);
transition: all .3s cubic-bezier(.09, .11, .24, .91);
}
.acidjs-horizontal-accordion > form > ul > li > input:checked ~ div
{
width: 763px; /* the width of the expanded panel */
padding: 8px;
overflow: auto;
opacity: 1;
}
.acidjs-horizontal-accordion > form > ul > li > div h3
{
font: inherit;
font-size: 14px;
border: 0;
}
.acidjs-horizontal-accordion > form > ul > li > div h3,
.acidjs-horizontal-accordion > form > ul > li > div p
{
color: #263238;
}
.acidjs-horizontal-accordion > form > ul > li > div p
{
font-size: 11px;
}
