Difference between revisions of "Team:IIT Kanpur/TestPage"

Line 1: Line 1:
−
{{Template:IIT_Kanpur}}
+
<html class=""><head>
−
<html>
+
 
−
<p>&lt;html class=""&gt;&lt;head&gt;</p>
+
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
−
<p>&lt;style class="cp-pen-styles"&gt;@import url(https://fonts.googleapis.com/css?family=Lato:400,700);<br />* {<br /> -moz-box-sizing: border-box;<br /> -webkit-box-sizing: border-box;<br /> box-sizing: border-box;<br />}</p>
+
* {
−
<p>body {<br /> font-family: 'Lato';<br />}</p>
+
  -moz-box-sizing: border-box;
−
<p>h1 {<br /> font-size: 2em;<br /> padding: 2em;<br /> text-align: center;<br />}</p>
+
  -webkit-box-sizing: border-box;
−
<p>.accordion dl {<br />}</p>
+
  box-sizing: border-box;
−
<p>.accordion dt &gt; a {<br /> text-align: center;<br /> font-weight: 700;<br /> padding: 2em;<br /> display: block;<br /> text-decoration: none;<br /> color: #fff;<br /> -webkit-transition: background-color 0.5s ease-in-out;<br />}<br />.accordion dd {<br /> background-color: #1abc9c;<br /> color:#fafafa;<br /> font-size: 1em;<br /> line-height: 1.5em;<br />}<br />.accordion dd &gt; p {<br /> padding: 1em 2em 1em 2em;<br />}</p>
+
}
−
<p>.accordion {<br /> position: relative;<br /> background-color: #16a085;<br />}</p>
+
 
−
<p>.container {<br /> max-width: 960px;<br /> margin: 0 auto;<br /> padding: 2em 0 2em 0;<br />}</p>
+
body {
−
<p>.accordionTitle {<br /> background-color: #22313F;<br /> border-bottom: 1px solid #2c3e50;<br />}<br />.accordionTitle:before {<br /> content: "+";<br /> font-size: 1.5em;<br /> line-height: 0.5em;<br /> float: left;<br /> -moz-transition: -moz-transform 0.3s ease-in-out;<br /> -o-transition: -o-transform 0.3s ease-in-out;<br /> -webkit-transition: -webkit-transform 0.3s ease-in-out;<br /> transition: transform 0.3s ease-in-out;<br />}<br />.accordionTitle:hover {<br /> background-color: #2c3e50;<br />}</p>
+
  font-family: 'Lato';
−
<p>.accordionTitleActive {<br /> background-color:#34495e;<br />}<br />.accordionTitleActive:before {<br /> -webkit-transform: rotate(-225deg);<br /> -moz-transform: rotate(-225deg);<br /> transform: rotate(-225deg);<br />}</p>
+
}
−
<p>.accordionItem {<br /> height: auto;<br /> overflow: hidden;<br />}<br />@media all {<br /> .accordionItem {<br /> max-height: 50em;<br /> -moz-transition: max-height 1s;<br /> -o-transition: max-height 1s;<br /> -webkit-transition: max-height 1s;<br /> transition: max-height 1s;<br /> }<br />}<br />@media screen and (min-width: 48em) {<br /> .accordionItem {<br /> max-height: 15em;<br /> -moz-transition: max-height 0.5s;<br /> -o-transition: max-height 0.5s;<br /> -webkit-transition: max-height 0.5s;<br /> transition: max-height 0.5s;<br /> }<br />}</p>
+
 
−
<p>.accordionItemCollapsed {<br /> max-height: 0;<br />}</p>
+
h1 {
−
<p>.animateIn {<br /> -webkit-animation-name: accordionIn;<br /> -webkit-animation-duration: 0.65s;<br /> -webkit-animation-iteration-count: 1;<br /> -webkit-animation-direction: normal;<br /> -webkit-animation-timing-function: ease-in-out;<br /> -webkit-animation-fill-mode: both;<br /> -webkit-animation-delay: 0s;<br /> -moz-animation-name: normal;<br /> -moz-animation-duration: 0.65s;<br /> -moz-animation-iteration-count: 1;<br /> -moz-animation-direction: alternate;<br /> -moz-animation-timing-function: ease-in-out;<br /> -moz-animation-fill-mode: both;<br /> -moz-animation-delay: 0s;<br /> animation-name: accordionIn;<br /> animation-duration: 0.65s;<br /> animation-iteration-count: 1;<br /> animation-direction: normal;<br /> animation-timing-function: ease-in-out;<br /> animation-fill-mode: both;<br /> animation-delay: 0s;<br />}</p>
+
  font-size: 2em;
−
<p>.animateOut {<br /> -webkit-animation-name: accordionOut;<br /> -webkit-animation-duration: 0.75s;<br /> -webkit-animation-iteration-count: 1;<br /> -webkit-animation-direction: alternate;<br /> -webkit-animation-timing-function: ease-in-out;<br /> -webkit-animation-fill-mode: both;<br /> -webkit-animation-delay: 0s;<br /> -moz-animation-name: accordionOut;<br /> -moz-animation-duration: 0.75s;<br /> -moz-animation-iteration-count: 1;<br /> -moz-animation-direction: alternate;<br /> -moz-animation-timing-function: ease-in-out;<br /> -moz-animation-fill-mode: both;<br /> -moz-animation-delay: 0s;<br /> animation-name: accordionOut;<br /> animation-duration: 0.75s;<br /> animation-iteration-count: 1;<br /> animation-direction: alternate;<br /> animation-timing-function: ease-in-out;<br /> animation-fill-mode: both;<br /> animation-delay: 0s;<br />}</p>
+
  padding: 2em;
−
<p>@-webkit-keyframes accordionIn {<br /> 0% {<br /> opacity: 0;<br /> -webkit-transform: scale(0.8);<br /> }<br /> 100% {<br /> opacity: 1;<br /> -webkit-transform: scale(1);<br /> }<br />}<br />@-moz-keyframes accordionIn {<br /> 0% {<br /> opacity: 0;<br /> -moz-transform: scale(0.8);<br /> }<br /> 100% {<br /> opacity: 1;<br /> -moz-transform: scale(1);<br /> }<br />}<br />@keyframes accordionIn {<br /> 0% {<br /> opacity: 0;<br /> transform: scale(0.8);<br /> }<br /> 100% {<br /> opacity: 1;<br /> transform: scale(1);<br /> }<br />}<br />@-webkit-keyframes accordionOut {<br /> 0% {<br /> opacity: 1;<br /> -webkit-transform: scale(1);<br /> }<br /> 100% {<br /> opacity: 0;<br /> -webkit-transform: scale(0.8);<br /> }<br />}<br />@-moz-keyframes accordionOut {<br /> 0% {<br /> opacity: 1;<br /> -moz-transform: scale(1);<br /> }<br /> 100% {<br /> opacity: 0;<br /> -moz-transform: scale(0.8);<br /> }<br />}<br />@keyframes accordionOut {<br /> 0% {<br /> opacity: 1;<br /> transform: scale(1);<br /> }<br /> 100% {<br /> opacity: 0;<br /> transform: scale(0.8);<br /> }<br />}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;<br />&lt;div class="container"&gt;<br /> &lt;h1&gt;Simple Flat UI CSS Accordion&lt;/h1&gt;<br /> &lt;div class="accordion"&gt;<br /> &lt;dl&gt;<br /> &lt;dt&gt;&lt;a class="accordionTitle" href="#"&gt;Test Simple Flat UI CSS Accordion 1&lt;/a&gt;&lt;/dt&gt;<br /> &lt;dd class="accordionItem animateOut accordionItemCollapsed"&gt;<br /> &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. &lt;/p&gt;<br /> &lt;/dd&gt;<br /> &lt;dt&gt;&lt;a href="#" class="accordionTitle"&gt;Test Simple Flat UI CSS Accordion 2&lt;/a&gt;&lt;/dt&gt;<br /> &lt;dd class="accordionItem animateOut accordionItemCollapsed"&gt;<br /> &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. &lt;/p&gt;<br /> &lt;/dd&gt;<br /> &lt;dt&gt;&lt;a href="#" class="accordionTitle"&gt;Test Simple Flat UI CSS Accordion 3&lt;/a&gt;&lt;/dt&gt;<br /> &lt;dd class="accordionItem animateOut accordionItemCollapsed"&gt;<br /> &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. &lt;/p&gt;<br /> &lt;/dd&gt;<br /> &lt;/dl&gt;<br /> &lt;/div&gt;<br />&lt;/div&gt;<br />&lt;script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"&gt;&lt;/script&gt;<br />&lt;script&gt;/*!<br /> * classie - class helper functions<br /> * from bonzo https://github.com/ded/bonzo<br />/*!<br /> * classie - class helper functions<br /> * from bonzo https://github.com/ded/bonzo<br /> * <br /> * classie.has( elem, 'my-class' ) -&gt; true/false<br /> * classie.add( elem, 'my-new-class' )<br /> * classie.remove( elem, 'my-unwanted-class' )<br /> * classie.toggle( elem, 'my-class' )<br /> */</p>
+
  text-align: center;
−
<p>/*jshint browser: true, strict: true, undef: true */<br />/*global define: false */<br />( function( window ) {<br />'use strict';<br />function classReg( className ) {<br /> return new RegExp("(^|\\s+)" + className + "(\\s+|$)");<br />}<br />var hasClass, addClass, removeClass;</p>
+
}
−
<p>if ( 'classList' in document.documentElement ) {<br /> hasClass = function( elem, c ) {<br /> return elem.classList.contains( c );<br /> };<br /> addClass = function( elem, c ) {<br /> elem.classList.add( c );<br /> };<br /> removeClass = function( elem, c ) {<br /> elem.classList.remove( c );<br /> };<br />}<br />else {<br /> hasClass = function( elem, c ) {<br /> return classReg( c ).test( elem.className );<br /> };<br /> addClass = function( elem, c ) {<br /> if ( !hasClass( elem, c ) ) {<br /> elem.className = elem.className + ' ' + c;<br /> }<br /> };<br /> removeClass = function( elem, c ) {<br /> elem.className = elem.className.replace( classReg( c ), ' ' );<br /> };<br />}</p>
+
 
−
<p>function toggleClass( elem, c ) {<br /> var fn = hasClass( elem, c ) ? removeClass : addClass;<br /> fn( elem, c );<br />}<br />var classie = {<br /> hasClass: hasClass,<br /> addClass: addClass,<br /> removeClass: removeClass,<br /> toggleClass: toggleClass,<br /> has: hasClass,<br /> add: addClass,<br /> remove: removeClass,<br /> toggle: toggleClass<br />};<br />if ( typeof define === 'function' &amp;&amp; define.amd ) {<br /> define( classie );<br />} else {<br /> window.classie = classie;<br />}<br />})( window );<br />var $ = function(selector){<br /> return document.querySelector(selector);<br />}<br />var accordion = $('.accordion');<br />accordion.addEventListener("click",function(e) {<br /> e.stopPropagation();<br /> e.preventDefault();<br /> if(e.target &amp;&amp; e.target.nodeName == "A") {<br /> var classes = e.target.className.split(" ");<br /> if(classes) {<br /> for(var x = 0; x &lt; classes.length; x++) {if (window.CP.shouldStopExecution(1)){break;}<br /> if(classes[x] == "accordionTitle") {<br /> var title = e.target;<br /> var content = e.target.parentNode.nextElementSibling;<br /> classie.toggle(title, 'accordionTitleActive');<br /> if(classie.has(content, 'accordionItemCollapsed')) {<br /> if(classie.has(content, 'animateOut')){<br /> classie.remove(content, 'animateOut');<br /> }<br /> classie.add(content, 'animateIn');<br /> }else{<br /> classie.remove(content, 'animateIn');<br /> classie.add(content, 'animateOut');<br /> }<br /> classie.toggle(content, 'accordionItemCollapsed'); <br /> }<br /> }<br />window.CP.exitedLoop(1);</p>
+
.accordion dl {
−
<p>} <br /> }<br />});<br />//# sourceURL=pen.js<br />&lt;/script&gt;<br />&lt;/body&gt;&lt;/html&gt;</p>
+
}
−
</html>
+
 
−
{{Template:IIT_Kanpur/Footer}}
+
.accordion dt > a {
 +
  text-align: center;
 +
  font-weight: 700;
 +
  padding: 2em;
 +
  display: block;
 +
  text-decoration: none;
 +
  color: #fff;
 +
  -webkit-transition: background-color 0.5s ease-in-out;
 +
}
 +
.accordion dd {
 +
  background-color: #1abc9c;
 +
  color:#fafafa;
 +
  font-size: 1em;
 +
  line-height: 1.5em;
 +
}
 +
.accordion dd > p {
 +
  padding: 1em 2em 1em 2em;
 +
}
 +
 
 +
.accordion {
 +
  position: relative;
 +
  background-color: #16a085;
 +
}
 +
 
 +
.container {
 +
  max-width: 960px;
 +
  margin: 0 auto;
 +
  padding: 2em 0 2em 0;
 +
}
 +
 
 +
.accordionTitle {
 +
  background-color: #22313F;
 +
  border-bottom: 1px solid #2c3e50;
 +
}
 +
.accordionTitle:before {
 +
  content: "+";
 +
  font-size: 1.5em;
 +
  line-height: 0.5em;
 +
  float: left;
 +
  -moz-transition: -moz-transform 0.3s ease-in-out;
 +
  -o-transition: -o-transform 0.3s ease-in-out;
 +
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
 +
  transition: transform 0.3s ease-in-out;
 +
}
 +
.accordionTitle:hover {
 +
  background-color: #2c3e50;
 +
}
 +
 
 +
.accordionTitleActive {
 +
  background-color:#34495e;
 +
}
 +
.accordionTitleActive:before {
 +
  -webkit-transform: rotate(-225deg);
 +
  -moz-transform: rotate(-225deg);
 +
  transform: rotate(-225deg);
 +
}
 +
 
 +
.accordionItem {
 +
  height: auto;
 +
  overflow: hidden;
 +
}
 +
@media all {
 +
  .accordionItem {
 +
    max-height: 50em;
 +
    -moz-transition: max-height 1s;
 +
    -o-transition: max-height 1s;
 +
    -webkit-transition: max-height 1s;
 +
    transition: max-height 1s;
 +
  }
 +
}
 +
@media screen and (min-width: 48em) {
 +
  .accordionItem {
 +
    max-height: 15em;
 +
    -moz-transition: max-height 0.5s;
 +
    -o-transition: max-height 0.5s;
 +
    -webkit-transition: max-height 0.5s;
 +
    transition: max-height 0.5s;
 +
  }
 +
}
 +
 
 +
.accordionItemCollapsed {
 +
  max-height: 0;
 +
}
 +
 
 +
.animateIn {
 +
  -webkit-animation-name: accordionIn;
 +
  -webkit-animation-duration: 0.65s;
 +
  -webkit-animation-iteration-count: 1;
 +
  -webkit-animation-direction: normal;
 +
  -webkit-animation-timing-function: ease-in-out;
 +
  -webkit-animation-fill-mode: both;
 +
  -webkit-animation-delay: 0s;
 +
  -moz-animation-name: normal;
 +
  -moz-animation-duration: 0.65s;
 +
  -moz-animation-iteration-count: 1;
 +
  -moz-animation-direction: alternate;
 +
  -moz-animation-timing-function: ease-in-out;
 +
  -moz-animation-fill-mode: both;
 +
  -moz-animation-delay: 0s;
 +
  animation-name: accordionIn;
 +
  animation-duration: 0.65s;
 +
  animation-iteration-count: 1;
 +
  animation-direction: normal;
 +
  animation-timing-function: ease-in-out;
 +
  animation-fill-mode: both;
 +
  animation-delay: 0s;
 +
}
 +
 
 +
.animateOut {
 +
  -webkit-animation-name: accordionOut;
 +
  -webkit-animation-duration: 0.75s;
 +
  -webkit-animation-iteration-count: 1;
 +
  -webkit-animation-direction: alternate;
 +
  -webkit-animation-timing-function: ease-in-out;
 +
  -webkit-animation-fill-mode: both;
 +
  -webkit-animation-delay: 0s;
 +
  -moz-animation-name: accordionOut;
 +
  -moz-animation-duration: 0.75s;
 +
  -moz-animation-iteration-count: 1;
 +
  -moz-animation-direction: alternate;
 +
  -moz-animation-timing-function: ease-in-out;
 +
  -moz-animation-fill-mode: both;
 +
  -moz-animation-delay: 0s;
 +
  animation-name: accordionOut;
 +
  animation-duration: 0.75s;
 +
  animation-iteration-count: 1;
 +
  animation-direction: alternate;
 +
  animation-timing-function: ease-in-out;
 +
  animation-fill-mode: both;
 +
  animation-delay: 0s;
 +
}
 +
 
 +
@-webkit-keyframes accordionIn {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: scale(0.8);
 +
  }
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: scale(1);
 +
  }
 +
}
 +
@-moz-keyframes accordionIn {
 +
  0% {
 +
    opacity: 0;
 +
    -moz-transform: scale(0.8);
 +
  }
 +
  100% {
 +
    opacity: 1;
 +
    -moz-transform: scale(1);
 +
  }
 +
}
 +
@keyframes accordionIn {
 +
  0% {
 +
    opacity: 0;
 +
    transform: scale(0.8);
 +
  }
 +
  100% {
 +
    opacity: 1;
 +
    transform: scale(1);
 +
  }
 +
}
 +
@-webkit-keyframes accordionOut {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: scale(1);
 +
  }
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: scale(0.8);
 +
  }
 +
}
 +
@-moz-keyframes accordionOut {
 +
  0% {
 +
    opacity: 1;
 +
    -moz-transform: scale(1);
 +
  }
 +
  100% {
 +
    opacity: 0;
 +
    -moz-transform: scale(0.8);
 +
  }
 +
}
 +
@keyframes accordionOut {
 +
  0% {
 +
    opacity: 1;
 +
    transform: scale(1);
 +
  }
 +
  100% {
 +
    opacity: 0;
 +
    transform: scale(0.8);
 +
  }
 +
}</style></head><body>
 +
<div class="container">
 +
          <h1>Simple Flat UI CSS Accordion</h1>
 +
          <div class="accordion">
 +
            <dl>
 +
              <dt><a class="accordionTitle" href="#">Test Simple Flat UI CSS Accordion 1</a></dt>
 +
              <dd class="accordionItem animateOut accordionItemCollapsed">
 +
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
 +
              </dd>
 +
              <dt><a href="#" class="accordionTitle">Test Simple Flat UI CSS Accordion 2</a></dt>
 +
              <dd class="accordionItem animateOut accordionItemCollapsed">
 +
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
 +
              </dd>
 +
              <dt><a href="#" class="accordionTitle">Test Simple Flat UI CSS Accordion 3</a></dt>
 +
              <dd class="accordionItem animateOut accordionItemCollapsed">
 +
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
 +
              </dd>
 +
            </dl>
 +
          </div>
 +
</div>
 +
<script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"></script>
 +
<script>/*!
 +
* classie - class helper functions
 +
* from bonzo https://github.com/ded/bonzo
 +
/*!
 +
* classie - class helper functions
 +
* from bonzo https://github.com/ded/bonzo
 +
*  
 +
* classie.has( elem, 'my-class' ) -> true/false
 +
* classie.add( elem, 'my-new-class' )
 +
* classie.remove( elem, 'my-unwanted-class' )
 +
* classie.toggle( elem, 'my-class' )
 +
*/
 +
 
 +
/*jshint browser: true, strict: true, undef: true */
 +
/*global define: false */
 +
( function( window ) {
 +
'use strict';
 +
function classReg( className ) {
 +
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
 +
}
 +
var hasClass, addClass, removeClass;
 +
 
 +
if ( 'classList' in document.documentElement ) {
 +
  hasClass = function( elem, c ) {
 +
    return elem.classList.contains( c );
 +
  };
 +
  addClass = function( elem, c ) {
 +
    elem.classList.add( c );
 +
  };
 +
  removeClass = function( elem, c ) {
 +
    elem.classList.remove( c );
 +
  };
 +
}
 +
else {
 +
  hasClass = function( elem, c ) {
 +
    return classReg( c ).test( elem.className );
 +
  };
 +
  addClass = function( elem, c ) {
 +
    if ( !hasClass( elem, c ) ) {
 +
      elem.className = elem.className + ' ' + c;
 +
    }
 +
  };
 +
  removeClass = function( elem, c ) {
 +
    elem.className = elem.className.replace( classReg( c ), ' ' );
 +
  };
 +
}
 +
 
 +
function toggleClass( elem, c ) {
 +
  var fn = hasClass( elem, c ) ? removeClass : addClass;
 +
  fn( elem, c );
 +
}
 +
var classie = {
 +
  hasClass: hasClass,
 +
  addClass: addClass,
 +
  removeClass: removeClass,
 +
  toggleClass: toggleClass,
 +
  has: hasClass,
 +
  add: addClass,
 +
  remove: removeClass,
 +
  toggle: toggleClass
 +
};
 +
if ( typeof define === 'function' && define.amd ) {
 +
  define( classie );
 +
} else {
 +
  window.classie = classie;
 +
}
 +
})( window );
 +
var $ = function(selector){
 +
  return document.querySelector(selector);
 +
}
 +
var accordion = $('.accordion');
 +
accordion.addEventListener("click",function(e) {
 +
  e.stopPropagation();
 +
  e.preventDefault();
 +
  if(e.target && e.target.nodeName == "A") {
 +
    var classes = e.target.className.split(" ");
 +
    if(classes) {
 +
      for(var x = 0; x < classes.length; x++) {if (window.CP.shouldStopExecution(1)){break;}
 +
        if(classes[x] == "accordionTitle") {
 +
          var title = e.target;
 +
          var content = e.target.parentNode.nextElementSibling;
 +
          classie.toggle(title, 'accordionTitleActive');
 +
          if(classie.has(content, 'accordionItemCollapsed')) {
 +
            if(classie.has(content, 'animateOut')){
 +
              classie.remove(content, 'animateOut');
 +
            }
 +
            classie.add(content, 'animateIn');
 +
          }else{
 +
            classie.remove(content, 'animateIn');
 +
            classie.add(content, 'animateOut');
 +
          }
 +
          classie.toggle(content, 'accordionItemCollapsed');    
 +
        }
 +
      }
 +
window.CP.exitedLoop(1);
 +
 
 +
    }
 +
  }
 +
});
 +
//# sourceURL=pen.js
 +
</script>
 +
</body></html>

Revision as of 22:42, 16 October 2018

Simple Flat UI CSS Accordion

Test Simple Flat UI CSS Accordion 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris.

Test Simple Flat UI CSS Accordion 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris.

Test Simple Flat UI CSS Accordion 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris.