JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film

Font Size

+

-

Reset

Back to list of all examples

Useful Stuff About:

Horizontal Accordion Panels

Click on a vertical title bar below to see example

Introduction

Column Intro text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis neque nunc, non euismod orci. Phasellus feugiat lobortis enim eget venenatis. Donec interdum ornare consequat. Fusce ornare rhoncus euismod. Praesent eget arcu eget leo lacinia vestibulum. Donec feugiat dignissim metus, a sollicitudin lectus ullamcorper eu. Nunc interdum euismod scelerisque. Nullam vitae libero tellus, a accumsan nibh. Donec lacinia, nunc a tincidunt imperdiet, enim mauris placerat orci, et adipiscing dolor justo non neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sit amet dolor magna, ac malesuada nisi.

Morbi posuere odio id urna cursus quis aliquet massa lobortis. Pellentesque aliquet nisi sed ligula ornare lacinia. Cras elit urna, ullamcorper a consectetur sit amet, semper et odio. Aenean euismod, turpis quis vestibulum ultrices, tellus ante pretium mauris, a auctor eros risus vel neque. Cras fringilla, risus auctor iaculis pulvinar, felis velit rhoncus felis, sit amet faucibus neque magna vestibulum elit. Nunc eu lobortis est. Etiam ut dapibus nisl. Quisque quis nisl est, at auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse non mi urna, sed consectetur enim. Phasellus adipiscing neque quis dui tempus quis convallis purus ultricies.

Suspendisse nisl tortor, porttitor id commodo sed, lobortis eget purus. Proin vel leo sit amet orci malesuada malesuada sed sed tortor. Aliquam eu ante non sem laoreet rhoncus vel nec nibh. Duis turpis risus, consectetur ut molestie sed, ornare nec nibh. Praesent tellus massa, elementum non faucibus id, ultricies ac erat. Maecenas ac egestas sapien. Aenean lectus lorem, elementum eu consequat quis, auctor nec diam.

Proin vitae consequat tellus. Aliquam erat volutpat. Vivamus leo nulla, egestas id auctor sed, ultricies eget ipsum. Fusce dapibus lacinia tristique. Pellentesque fringilla massa non ligula adipiscing gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut faucibus orci eget sapien malesuada mattis. Suspendisse ipsum neque, interdum vel ullamcorper non, sollicitudin et erat. Morbi non elementum sapien. Phasellus blandit pretium tortor eget ornare. Vivamus ac mauris arcu. Aliquam erat volutpat.

Etiam tellus orci, luctus ut mollis at, consequat quis nulla. Integer at leo quam, in tempus dolor. Donec cursus nunc at tellus pretium non varius risus cursus. Morbi consequat elementum tempus. Nullam sit amet elit vitae dui tempus iaculis. Fusce mollis scelerisque neque vitae faucibus. In hac habitasse platea dictumst. Duis commodo, dui id congue pellentesque, velit est tincidunt velit, a porttitor dui mauris eget tortor. Cras consequat justo at eros ultrices tincidunt. Quisque pretium vulputate nunc et semper. Donec vel quam non purus suscipit ultrices vel vel massa. Donec gravida mattis augue nec gravida. The END

Column 1 Title

Column 1 text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis neque nunc, non euismod orci. Phasellus feugiat lobortis enim eget venenatis. Donec interdum ornare consequat. Fusce ornare rhoncus euismod. Praesent eget arcu eget leo lacinia vestibulum. Donec feugiat dignissim metus, a sollicitudin lectus ullamcorper eu. Nunc interdum euismod scelerisque. Nullam vitae libero tellus, a accumsan nibh. Donec lacinia, nunc a tincidunt imperdiet, enim mauris placerat orci, et adipiscing dolor justo non neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sit amet dolor magna, ac malesuada nisi.

Morbi posuere odio id urna cursus quis aliquet massa lobortis. Pellentesque aliquet nisi sed ligula ornare lacinia. Cras elit urna, ullamcorper a consectetur sit amet, semper et odio. Aenean euismod, turpis quis vestibulum ultrices, tellus ante pretium mauris, a auctor eros risus vel neque. Cras fringilla, risus auctor iaculis pulvinar, felis velit rhoncus felis, sit amet faucibus neque magna vestibulum elit. Nunc eu lobortis est. Etiam ut dapibus nisl. Quisque quis nisl est, at auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse non mi urna, sed consectetur enim. Phasellus adipiscing neque quis dui tempus quis convallis purus ultricies.

Suspendisse nisl tortor, porttitor id commodo sed, lobortis eget purus. Proin vel leo sit amet orci malesuada malesuada sed sed tortor. Aliquam eu ante non sem laoreet rhoncus vel nec nibh. Duis turpis risus, consectetur ut molestie sed, ornare nec nibh. Praesent tellus massa, elementum non faucibus id, ultricies ac erat. Maecenas ac egestas sapien. Aenean lectus lorem, elementum eu consequat quis, auctor nec diam.

Proin vitae consequat tellus. Aliquam erat volutpat. Vivamus leo nulla, egestas id auctor sed, ultricies eget ipsum. Fusce dapibus lacinia tristique. Pellentesque fringilla massa non ligula adipiscing gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut faucibus orci eget sapien malesuada mattis. Suspendisse ipsum neque, interdum vel ullamcorper non, sollicitudin et erat. Morbi non elementum sapien. Phasellus blandit pretium tortor eget ornare. Vivamus ac mauris arcu. Aliquam erat volutpat.

Etiam tellus orci, luctus ut mollis at, consequat quis nulla. Integer at leo quam, in tempus dolor. Donec cursus nunc at tellus pretium non varius risus cursus. Morbi consequat elementum tempus. Nullam sit amet elit vitae dui tempus iaculis. Fusce mollis scelerisque neque vitae faucibus. In hac habitasse platea dictumst. Duis commodo, dui id congue pellentesque, velit est tincidunt velit, a porttitor dui mauris eget tortor. Cras consequat justo at eros ultrices tincidunt. Quisque pretium vulputate nunc et semper. Donec vel quam non purus suscipit ultrices vel vel massa. Donec gravida mattis augue nec gravida.

Column 2 Title

Column 2 text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis neque nunc, non euismod orci. Phasellus feugiat lobortis enim eget venenatis. Donec interdum ornare consequat. Fusce ornare rhoncus euismod. Praesent eget arcu eget leo lacinia vestibulum. Donec feugiat dignissim metus, a sollicitudin lectus ullamcorper eu. Nunc interdum euismod scelerisque. Nullam vitae libero tellus, a accumsan nibh. Donec lacinia, nunc a tincidunt imperdiet, enim mauris placerat orci, et adipiscing dolor justo non neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sit amet dolor magna, ac malesuada nisi.

Morbi posuere odio id urna cursus quis aliquet massa lobortis. Pellentesque aliquet nisi sed ligula ornare lacinia. Cras elit urna, ullamcorper a consectetur sit amet, semper et odio. Aenean euismod, turpis quis vestibulum ultrices, tellus ante pretium mauris, a auctor eros risus vel neque. Cras fringilla, risus auctor iaculis pulvinar, felis velit rhoncus felis, sit amet faucibus neque magna vestibulum elit. Nunc eu lobortis est. Etiam ut dapibus nisl. Quisque quis nisl est, at auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse non mi urna, sed consectetur enim. Phasellus adipiscing neque quis dui tempus quis convallis purus ultricies.

Suspendisse nisl tortor, porttitor id commodo sed, lobortis eget purus. Proin vel leo sit amet orci malesuada malesuada sed sed tortor. Aliquam eu ante non sem laoreet rhoncus vel nec nibh. Duis turpis risus, consectetur ut molestie sed, ornare nec nibh. Praesent tellus massa, elementum non faucibus id, ultricies ac erat. Maecenas ac egestas sapien. Aenean lectus lorem, elementum eu consequat quis, auctor nec diam.

Proin vitae consequat tellus. Aliquam erat volutpat. Vivamus leo nulla, egestas id auctor sed, ultricies eget ipsum. Fusce dapibus lacinia tristique. Pellentesque fringilla massa non ligula adipiscing gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut faucibus orci eget sapien malesuada mattis. Suspendisse ipsum neque, interdum vel ullamcorper non, sollicitudin et erat. Morbi non elementum sapien. Phasellus blandit pretium tortor eget ornare. Vivamus ac mauris arcu. Aliquam erat volutpat.

Etiam tellus orci, luctus ut mollis at, consequat quis nulla. Integer at leo quam, in tempus dolor. Donec cursus nunc at tellus pretium non varius risus cursus. Morbi consequat elementum tempus. Nullam sit amet elit vitae dui tempus iaculis. Fusce mollis scelerisque neque vitae faucibus. In hac habitasse platea dictumst. Duis commodo, dui id congue pellentesque, velit est tincidunt velit, a porttitor dui mauris eget tortor. Cras consequat justo at eros ultrices tincidunt. Quisque pretium vulputate nunc et semper. Donec vel quam non purus suscipit ultrices vel vel massa. Donec gravida mattis augue nec gravida.

Column 3 Title

Column 3 text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis neque nunc, non euismod orci. Phasellus feugiat lobortis enim eget venenatis. Donec interdum ornare consequat. Fusce ornare rhoncus euismod. Praesent eget arcu eget leo lacinia vestibulum. Donec feugiat dignissim metus, a sollicitudin lectus ullamcorper eu. Nunc interdum euismod scelerisque. Nullam vitae libero tellus, a accumsan nibh. Donec lacinia, nunc a tincidunt imperdiet, enim mauris placerat orci, et adipiscing dolor justo non neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sit amet dolor magna, ac malesuada nisi.

Morbi posuere odio id urna cursus quis aliquet massa lobortis. Pellentesque aliquet nisi sed ligula ornare lacinia. Cras elit urna, ullamcorper a consectetur sit amet, semper et odio. Aenean euismod, turpis quis vestibulum ultrices, tellus ante pretium mauris, a auctor eros risus vel neque. Cras fringilla, risus auctor iaculis pulvinar, felis velit rhoncus felis, sit amet faucibus neque magna vestibulum elit. Nunc eu lobortis est. Etiam ut dapibus nisl. Quisque quis nisl est, at auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse non mi urna, sed consectetur enim. Phasellus adipiscing neque quis dui tempus quis convallis purus ultricies.

Suspendisse nisl tortor, porttitor id commodo sed, lobortis eget purus. Proin vel leo sit amet orci malesuada malesuada sed sed tortor. Aliquam eu ante non sem laoreet rhoncus vel nec nibh. Duis turpis risus, consectetur ut molestie sed, ornare nec nibh. Praesent tellus massa, elementum non faucibus id, ultricies ac erat. Maecenas ac egestas sapien. Aenean lectus lorem, elementum eu consequat quis, auctor nec diam.

Proin vitae consequat tellus. Aliquam erat volutpat. Vivamus leo nulla, egestas id auctor sed, ultricies eget ipsum. Fusce dapibus lacinia tristique. Pellentesque fringilla massa non ligula adipiscing gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut faucibus orci eget sapien malesuada mattis. Suspendisse ipsum neque, interdum vel ullamcorper non, sollicitudin et erat. Morbi non elementum sapien. Phasellus blandit pretium tortor eget ornare. Vivamus ac mauris arcu. Aliquam erat volutpat.

Etiam tellus orci, luctus ut mollis at, consequat quis nulla. Integer at leo quam, in tempus dolor. Donec cursus nunc at tellus pretium non varius risus cursus. Morbi consequat elementum tempus. Nullam sit amet elit vitae dui tempus iaculis. Fusce mollis scelerisque neque vitae faucibus. In hac habitasse platea dictumst. Duis commodo, dui id congue pellentesque, velit est tincidunt velit, a porttitor dui mauris eget tortor. Cras consequat justo at eros ultrices tincidunt. Quisque pretium vulputate nunc et semper. Donec vel quam non purus suscipit ultrices vel vel massa. Donec gravida mattis augue nec gravida.

Column 4 Title

Column 4 text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis neque nunc, non euismod orci. Phasellus feugiat lobortis enim eget venenatis. Donec interdum ornare consequat. Fusce ornare rhoncus euismod. Praesent eget arcu eget leo lacinia vestibulum. Donec feugiat dignissim metus, a sollicitudin lectus ullamcorper eu. Nunc interdum euismod scelerisque. Nullam vitae libero tellus, a accumsan nibh. Donec lacinia, nunc a tincidunt imperdiet, enim mauris placerat orci, et adipiscing dolor justo non neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sit amet dolor magna, ac malesuada nisi.

Morbi posuere odio id urna cursus quis aliquet massa lobortis. Pellentesque aliquet nisi sed ligula ornare lacinia. Cras elit urna, ullamcorper a consectetur sit amet, semper et odio. Aenean euismod, turpis quis vestibulum ultrices, tellus ante pretium mauris, a auctor eros risus vel neque. Cras fringilla, risus auctor iaculis pulvinar, felis velit rhoncus felis, sit amet faucibus neque magna vestibulum elit. Nunc eu lobortis est. Etiam ut dapibus nisl. Quisque quis nisl est, at auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse non mi urna, sed consectetur enim. Phasellus adipiscing neque quis dui tempus quis convallis purus ultricies.

Suspendisse nisl tortor, porttitor id commodo sed, lobortis eget purus. Proin vel leo sit amet orci malesuada malesuada sed sed tortor. Aliquam eu ante non sem laoreet rhoncus vel nec nibh. Duis turpis risus, consectetur ut molestie sed, ornare nec nibh. Praesent tellus massa, elementum non faucibus id, ultricies ac erat. Maecenas ac egestas sapien. Aenean lectus lorem, elementum eu consequat quis, auctor nec diam.

Proin vitae consequat tellus. Aliquam erat volutpat. Vivamus leo nulla, egestas id auctor sed, ultricies eget ipsum. Fusce dapibus lacinia tristique. Pellentesque fringilla massa non ligula adipiscing gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut faucibus orci eget sapien malesuada mattis. Suspendisse ipsum neque, interdum vel ullamcorper non, sollicitudin et erat. Morbi non elementum sapien. Phasellus blandit pretium tortor eget ornare. Vivamus ac mauris arcu. Aliquam erat volutpat.

Etiam tellus orci, luctus ut mollis at, consequat quis nulla. Integer at leo quam, in tempus dolor. Donec cursus nunc at tellus pretium non varius risus cursus. Morbi consequat elementum tempus. Nullam sit amet elit vitae dui tempus iaculis. Fusce mollis scelerisque neque vitae faucibus. In hac habitasse platea dictumst. Duis commodo, dui id congue pellentesque, velit est tincidunt velit, a porttitor dui mauris eget tortor. Cras consequat justo at eros ultrices tincidunt. Quisque pretium vulputate nunc et semper. Donec vel quam non purus suscipit ultrices vel vel massa. Donec gravida mattis augue nec gravida.

Javascript makes the functionality work. PHP server side includes loads the content from external content pages (php or html). Download files here.

Scripts needed (copy and paste inside <head>)


<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/easing.js"></script>
<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/css-transform.js"></script>
<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/animate-css-rotate-scale.js"></script>
<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/horizontal_accordion_panels.js"></script>

Here's the html code


<!--This block below must be INSIDE the centeringDiv-->
<div id="allColumns">
<div class="columnBox" id="columnBox1">
<div class="vBar" id="vBar">
<h1>Article 1 Title</h1>
</div>
<article id="article1">article 1 content</article>
</div>
<div class="columnBox" id="columnBox2">
<div class="vBar" id="vBar2">
<h1>Article 2 Title</h1>
</div>
<article id="article2">article 2 content</article>
</div>
<div class="columnBox" id="columnBox3">
<div class="vBar" id="vBar3">
<h1>Article 3 Title</h1>
</div>
<article id="article3">article 3 content</article>
</div>
<div class="columnBox" id="columnBox4">
<div class="vBar" id="vBar4">
<h1>Article 4 Title</h1>
</div>
<article id="article4">article 4 content</article>
</div>
<div class="columnBox" id="columnBox5">
<div class="vBar" id="vBar5">
<h1>Article 5 Title</h1>
</div>
<article id="article5">article 5 content</article>
</div>
</div>

Here's the CSS


#allColumns, .columnBox, .vBar {/*The height of block of entire horizontal panels*/
height: 600px;/*Adjust as needed for your webpage design*/
}
.columnBox, .vBar {/*The initial width of all title bars and the non-selected column boxes*/
width: 50px;/*Adjust as needed for your webpage design*/
}
#allColumns {
width: 1000px;/*Adjust as needed for your webpage design*/
position: relative;
z-index: 500;/*Places allColumns above or on top of everything*/
overflow: hidden;
}
.columnBox {
background-color: #FFF;
position: relative;
top: 0px;
overflow: hidden;
float: left;/*Aligns each column box side to side*/
}
.vBar {/*formats the vertical bars for column titles */
background-color: rgba(153,102,255,1);
float: left;
position: relative;
left: 0px;
top: 0px;
cursor: pointer;
}
.vBar h1 {/*formats the text of the column titles */
font-size: 20px;
font-weight: bold;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
white-space: nowrap;
text-align: right;
margin-top: 500px;/*moves the title text down*/
}
.columnBox article {
float: left;
overflow: auto;
padding: 5px;
}