grid-accordion-js
Version:
Modular grid accordion built in Vanilla JavaScript.
578 lines (484 loc) • 25.6 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Grid Accordion - Example 1</title>
<link rel="stylesheet" type="text/css" href="../build/grid-accordion.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/examples.css" media="screen"/>
<script type="text/javascript" src="../build/grid-accordion.js"></script>
<script type="text/javascript">
document.addEventListener( 'DOMContentLoaded', () => {
const accordion = new GridAccordion( '#example1', {
width: 960,
height: 700,
responsiveMode: 'auto',
openedPanelWidth: 'auto',
openedPanelHeight: 'auto',
closePanelsOnMouseOut: false,
autoplay: false
});
document.querySelector( '.controls .auto' ).addEventListener( 'click', () => {
// change the responsive mode to 'auto' and remove the 'custom-responsive' class
document.getElementById( 'example1' ).classList.remove( 'custom-responsive' );
accordion.settings.responsiveMode = 'auto';
accordion.update();
// change the arrows' visibility
document.getElementsByClassName( 'auto-arrow' )[ 0 ].style.visibility = 'visible';
document.getElementsByClassName( 'custom-arrow' )[ 0 ].style.visibility = 'hidden';
});
document.querySelector( '.controls .custom' ).addEventListener( 'click', () => {
// change the responsive mode to 'custom' and add the 'custom-responsive'
// class in order to use it as a reference in the CSS code
document.getElementById( 'example1' ).classList.add( 'custom-responsive' );
accordion.settings.responsiveMode = 'custom';
accordion.update();
// change the arrows' visibility
document.getElementsByClassName( 'custom-arrow' )[ 0 ].style.visibility = 'visible';
document.getElementsByClassName( 'auto-arrow' )[ 0 ].style.visibility = 'hidden';
});
});
</script>
</head>
<body>
<!-- Grid Accordion -->
<div id="example1" class="grid-accordion">
<div class="ga-panels">
<!-- Panel 1 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image1.jpg" data-retina="https://bqworks.net/grid-accordion/images/image1@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 1
</div>
<h3 class="ga-layer ga-opened ga-black ga-padding"
data-horizontal="40" data-vertical="62%"
data-show-transition="left" data-hide-transition="left">
Lorem ipsum dolor sit amet
</h3>
<p class="ga-layer ga-opened ga-white ga-padding hide-medium-screen"
data-horizontal="40" data-vertical="74%" data-width="350"
data-show-transition="left" data-show-delay="400" data-hide-transition="left" data-hide-delay="500">
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>
<!-- Panel 2 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image2.jpg" data-retina="https://bqworks.net/grid-accordion/images/image2@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 2
</div>
<p class="ga-layer ga-opened ga-white ga-padding"
data-position="bottomLeft" data-horizontal="20" data-vertical="20"
data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="200">
Lorem ipsum
</p>
<p class="ga-layer ga-opened ga-black ga-padding hide-medium-screen"
data-position="bottomLeft" data-horizontal="150" data-vertical="20"
data-show-transition="left" data-hide-transition="up" data-show-delay="600" data-hide-delay="100">
dolor sit amet
</p>
</div>
<!-- Panel 3 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image3.jpg" data-retina="https://bqworks.net/grid-accordion/images/image3@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 3
</div>
<p class="ga-layer ga-opened ga-white ga-padding"
data-horizontal="center" data-vertical="44%"
data-show-transition="right" data-hide-transition="left" data-show-delay="500">
Lorem ipsum dolor sit amet
</p>
<p class="ga-layer ga-opened ga-black ga-padding hide-medium-screen"
data-horizontal="center" data-vertical="58%"
data-show-transition="left" data-show-delay="700" data-hide-transition="right" data-hide-delay="200">
consectetur adipisicing elit
</p>
</div>
<!-- Panel 4 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image4.jpg" data-retina="https://bqworks.net/grid-accordion/images/image4@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 4
</div>
<p class="ga-layer ga-opened ga-black ga-padding"
data-position="bottomLeft"
data-show-transition="up" data-hide-transition="down" data-show-delay="500">
Lorem ipsum dolor sit amet <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</p>
</div>
<!-- Panel 5 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image5.jpg" data-retina="https://bqworks.net/grid-accordion/images/image5@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 5
</div>
<p class="ga-layer ga-opened ga-white ga-padding"
data-vertical="10" data-horizontal="2%" data-width="96%"
data-show-transition="down" data-show-delay="500" data-hide-transition="up">
Lorem ipsum dolor sit amet <span class="hide-medium-screen">, 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.</span>
</p>
</div>
<!-- Panel 6 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image6.jpg" data-retina="https://bqworks.net/grid-accordion/images/image6@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 6
</div>
<p class="ga-layer ga-opened ga-white ga-padding"
data-horizontal="10" data-vertical="10" data-width="50%"
data-show-delay="700">
Lorem ipsum dolor sit amet <span class="hide-medium-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</p>
</div>
<!-- Panel 7 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image7.jpg" data-retina="https://bqworks.net/grid-accordion/images/image7@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 7
</div>
<p class="ga-layer ga-opened ga-black ga-padding"
data-position="bottomLeft" data-vertical="10" data-horizontal="2%" data-width="96%"
data-show-transition="up" data-show-delay="500" data-hide-transition="down">
Lorem ipsum dolor sit amet <span class="hide-medium-screen">, 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.</span>
</p>
</div>
<!-- Panel 8 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image8.jpg" data-retina="https://bqworks.net/grid-accordion/images/image8@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 8
</div>
<h3 class="ga-layer ga-opened ga-white ga-padding"
data-position="topRight" data-horizontal="7%" data-vertical="70%"
data-show-transition="up" data-show-delay="500">
Lorem ipsum dolor sit amet
</h3>
<p class="ga-layer ga-opened ga-black ga-padding hide-medium-screen"
data-position="topRight" data-horizontal="7%" data-vertical="82%"
data-show-transition="up" data-show-delay="700">
consectetur adipisicing elit
</p>
</div>
<!-- Panel 9 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image9.jpg" data-retina="https://bqworks.net/grid-accordion/images/image9@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 9
</div>
<div class="ga-layer"
data-position="bottomLeft" data-horizontal="5%" data-vertical="10" data-width="90%" data-height="28%">
<p class="ga-layer ga-opened ga-black ga-padding"
data-show-transition="down" data-hide-transition="up" data-show-delay="600">
Lorem ipsum dolor sit amet
</p>
<p class="ga-layer ga-opened ga-white ga-padding hide-medium-screen"
data-vertical="50"
data-show-transition="up" data-hide-transition="down" data-show-delay="600">
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<!-- Panel 10 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image10.jpg" data-retina="https://bqworks.net/grid-accordion/images/image10@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 10
</div>
<div class="ga-layer"
data-position="bottomLeft" data-horizontal="20" data-vertical="30" data-width="100%" data-height="40%">
<h3 class="ga-layer ga-opened ga-black ga-padding"
data-vertical="50"
data-show-transition="left" data-show-delay="200" data-hide-transition="right" data-hide-delay="200">
Lorem ipsum dolor sit amet
</h3>
<p class="ga-layer ga-opened ga-white ga-padding hide-medium-screen"
data-vertical="100" data-width="350"
data-show-transition="left" data-show-delay="400" data-hide-transition="right" data-hide-delay="500">
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>
</div>
<!-- Panel 11 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image11.jpg" data-retina="https://bqworks.net/grid-accordion/images/image11@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 11
</div>
<p class="ga-layer ga-opened ga-white ga-padding"
data-position="bottomLeft" data-vertical="10" data-horizontal="2%" data-width="96%"
data-show-transition="up" data-show-delay="600">
Lorem ipsum dolor sit amet <span class="hide-medium-screen">, 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.</span>
</p>
</div>
<!-- Panel 12 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image12.jpg" data-retina="https://bqworks.net/grid-accordion/images/image12@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 12
</div>
<p class="ga-layer ga-opened ga-white ga-padding"
data-position="bottomLeft" data-horizontal="20" data-vertical="20"
data-show-transition="right" data-hide-transition="left" data-show-delay="500">
Lorem ipsum dolor sit amet
</p>
</div>
<!-- Panel 13 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image13.jpg" data-retina="https://bqworks.net/grid-accordion/images/image13@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 13
</div>
<p class="ga-layer ga-opened ga-black ga-padding"
data-horizontal="30" data-vertical="30"
data-show-transition="left" data-hide-transition="down" data-show-delay="400" data-hide-delay="200">
Lorem ipsum
</p>
<p class="ga-layer ga-opened ga-white ga-padding hide-medium-screen"
data-horizontal="150" data-vertical="30"
data-show-transition="left" data-hide-transition="down" data-show-delay="600" data-hide-delay="100">
dolor sit amet
</p>
</div>
<!-- Panel 14 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image14.jpg" data-retina="https://bqworks.net/grid-accordion/images/image14@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 14
</div>
<p class="ga-layer ga-opened ga-white ga-padding"
data-vertical="10" data-horizontal="2%" data-width="96%"
data-show-transition="down" data-show-delay="500" data-hide-transition="up">
Lorem ipsum dolor sit amet <span class="hide-medium-screen">, 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.</span>
</p>
</div>
<!-- Panel 15 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image15.jpg" data-retina="https://bqworks.net/grid-accordion/images/image15@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 15
</div>
<h3 class="ga-layer ga-opened ga-black ga-padding"
data-horizontal="40" data-vertical="70%"
data-show-transition="left" data-hide-transition="left" data-show-delay="500">
Lorem ipsum dolor sit amet
</h3>
<p class="ga-layer ga-opened ga-white ga-padding hide-medium-screen"
data-horizontal="40" data-vertical="82%"
data-show-transition="left" data-show-delay="700" data-hide-transition="left">
consectetur adipisicing elit
</p>
</div>
<!-- Panel 16 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image16.jpg" data-retina="https://bqworks.net/grid-accordion/images/image16@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 16
</div>
<div class="ga-layer"
data-position="bottomLeft" data-horizontal="20" data-vertical="20" data-width="100%">
<p class="ga-layer ga-opened ga-white ga-padding"
data-position="bottomLeft"
data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="200">
Lorem ipsum
</p>
<p class="ga-layer ga-opened ga-black ga-padding hide-medium-screen"
data-position="bottomLeft" data-horizontal="120"
data-show-transition="left" data-hide-transition="up" data-show-delay="600" data-hide-delay="100">
dolor sit amet
</p>
</div>
</div>
<!-- Panel 17 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image17.jpg" data-retina="https://bqworks.net/grid-accordion/images/image17@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 17
</div>
<p class="ga-layer ga-opened ga-white ga-padding"
data-horizontal="50" data-vertical="10%"
data-show-transition="right" data-hide-transition="left" data-show-delay="500">
Lorem ipsum dolor sit amet
</p>
<p class="ga-layer ga-opened ga-black ga-padding hide-medium-screen"
data-horizontal="50" data-vertical="24%"
data-show-transition="left" data-show-delay="700" data-hide-transition="right" data-hide-delay="200">
consectetur adipisicing elit
</p>
</div>
<!-- Panel 18 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image18.jpg" data-retina="https://bqworks.net/grid-accordion/images/image18@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 18
</div>
<p class="ga-layer ga-opened ga-black ga-padding"
data-position="topLeft"
data-show-transition="up" data-hide-transition="down" data-show-delay="600">
Lorem ipsum dolor sit amet <span class="hide-medium-screen">, 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.</span>
</p>
</div>
<!-- Panel 19 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image19.jpg" data-retina="https://bqworks.net/grid-accordion/images/image19@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 19
</div>
<p class="ga-layer ga-opened ga-white ga-padding"
data-vertical="10" data-horizontal="2%" data-width="96%"
data-show-transition="down" data-show-delay="400" data-hide-transition="up">
Lorem ipsum dolor sit amet <span class="hide-medium-screen">, 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.</span>
</p>
</div>
<!-- Panel 20 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image20.jpg" data-retina="https://bqworks.net/grid-accordion/images/image20@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 20
</div>
</div>
<!-- Panel 21 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image1.jpg" data-retina="https://bqworks.net/grid-accordion/images/image1@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 21
</div>
<h3 class="ga-layer ga-opened ga-black ga-padding"
data-horizontal="40" data-vertical="62%"
data-show-transition="left" data-hide-transition="left">
Lorem ipsum dolor sit amet
</h3>
<p class="ga-layer ga-opened ga-white ga-padding hide-medium-screen"
data-horizontal="40" data-vertical="74%" data-width="350"
data-show-transition="left" data-show-delay="400" data-hide-transition="left" data-hide-delay="500">
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>
<!-- Panel 22 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image2.jpg" data-retina="https://bqworks.net/grid-accordion/images/image2@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 22
</div>
<p class="ga-layer ga-opened ga-white ga-padding"
data-position="bottomLeft" data-horizontal="20" data-vertical="20"
data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="200">
Lorem ipsum
</p>
<p class="ga-layer ga-opened ga-black ga-padding hide-medium-screen"
data-position="bottomLeft" data-horizontal="150" data-vertical="20"
data-show-transition="left" data-hide-transition="up" data-show-delay="600" data-hide-delay="100">
dolor sit amet
</p>
</div>
<!-- Panel 23 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image3.jpg" data-retina="https://bqworks.net/grid-accordion/images/image3@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 23
</div>
<p class="ga-layer ga-opened ga-white ga-padding"
data-horizontal="center" data-vertical="44%"
data-show-transition="right" data-hide-transition="left" data-show-delay="500">
Lorem ipsum dolor sit amet
</p>
<p class="ga-layer ga-opened ga-black ga-padding hide-medium-screen"
data-horizontal="center" data-vertical="58%"
data-show-transition="left" data-show-delay="700" data-hide-transition="right" data-hide-delay="200">
consectetur adipisicing elit
</p>
</div>
<!-- Panel 24 -->
<div class="ga-panel">
<a href="https://bqworks.net">
<img class="ga-background" src="blank.gif" data-src="https://bqworks.net/grid-accordion/images/image4.jpg" data-retina="https://bqworks.net/grid-accordion/images/image4@2x.jpg"/>
</a>
<div class="ga-layer ga-closed ga-white panel-counter"
data-position="bottomLeft" data-horizontal="8" data-vertical="8">
Panel 24
</div>
<p class="ga-layer ga-opened ga-black ga-padding"
data-position="bottomLeft"
data-show-transition="up" data-hide-transition="down" data-show-delay="500">
Lorem ipsum dolor sit amet <span class="hide-medium-screen">, 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.</span>
</p>
</div>
</div>
</div>
<!-- End of Grid Accordion -->
<div class="controls">
Change responsive mode:
<span class="auto-arrow">→</span> <a href="#" class="auto">Auto</a> or
<span class="custom-arrow">→</span> <a href="#" class="custom">Custom</a>
</div>
</body>
</html>