Skip to content

Instantly share code, notes, and snippets.

@ntkog

ntkog/pruebaflex.html

Created May 31, 2015 11:56
Show Gist options
  • Save ntkog/ec4dc0c714dc799e74ab to your computer and use it in GitHub Desktop.
Save ntkog/ec4dc0c714dc799e74ab to your computer and use it in GitHub Desktop.
Download ZIP
Simple Accordion with FlexBox , css3 transitions, and a little javascript
Raw
pruebaflex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
.container {
flex-shrink: 0;
flex-basis: auto;
display: flex;
flex-direction: column;
height: 90%;
margin: 2em;
border: 2px dotted grey;
padding: 0.5em;
}
.item {
flex-grow: 2 ;
margin: 1em 0;
border: 2px dashed #ccc;
-webkit-transition: all 150ms cubic-bezier(0.175, 0.885, 0.320, 1);
-webkit-transition: all 150ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition: all 150ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition: all 150ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition: all 150ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
.content {
padding: 1em 1em 2em 1em ;
}
.item[data-selected="true"] {
background-color: skyblue !important;
flex-grow: 8;
max-height: 1000px;
overflow-y: scroll;
border-bottom: 1em solid skyblue;
}
.item[data-selected="false"] {
max-height: 100px;
flex-grow: 1;
overflow-y: scroll;
padding-bottom: 1em;
}
</style>
<div class="container">
<div class="item content" data-selected="false">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus expedita sint dolorum facilis, at explicabo nam ipsam alias distinctio, aspernatur officiis debitis voluptate inventore ducimus, sit. Minus qui modi est ullam harum asperiores quaerat consectetur fugit odio culpa omnis, in enim impedit quisquam maiores necessitatibus quis iure tempora, numquam ipsa optio pariatur laboriosam? Laudantium beatae doloremque consequatur, nisi porro magnam maxime quas consequuntur cumque debitis dolores, accusamus numquam omnis, iure nostrum alias blanditiis, nihil facilis! Corrupti voluptatibus magni reprehenderit porro, saepe dolorum consectetur! Laborum dolorem accusamus vero qui unde atque illum impedit! Perspiciatis itaque delectus, sint libero labore non natus.
</div>
<div class="item content" data-selected="false" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic laboriosam vel beatae suscipit, ullam consequuntur veritatis dicta aspernatur nisi, recusandae commodi quis facilis sed. Magni distinctio inventore eius hic repellat temporibus impedit natus, praesentium, corrupti perspiciatis est reprehenderit nulla sequi dolore maiores pariatur laboriosam rem, nemo, reiciendis. Est cum deserunt eum quasi saepe eligendi doloremque repudiandae aliquid quae minus obcaecati consequuntur qui mollitia et magni voluptate quam, ea suscipit dolorem voluptates nisi? Praesentium soluta iure, laborum rem odio voluptates. Dolorum fuga expedita, reprehenderit nobis, consequuntur optio. Pariatur quis, numquam. Repellat unde veritatis delectus obcaecati. Tempore similique, fuga. Ipsa tempore ex, magni rem explicabo itaque exercitationem inventore. Doloremque, mollitia assumenda, blanditiis hic perspiciatis voluptatem quaerat et quae incidunt iure alias deserunt asperiores labore odio consequuntur culpa, sapiente ullam ratione animi, dicta illum sunt saepe harum vero. Natus nisi eum expedita omnis. Aliquid quae accusantium sunt dolores, doloremque sequi molestiae necessitatibus consequatur distinctio accusamus velit, ipsum facere? Voluptates odit esse, laudantium a labore placeat, ipsam voluptatibus explicabo quibusdam, nemo hic recusandae distinctio facere amet! Dignissimos, ipsum. Voluptatem porro veniam beatae labore illum iure sapiente, ullam magni! Enim vero, nesciunt est praesentium, iste aut adipisci dolor alias amet. Sint suscipit natus quibusdam laboriosam delectus vel animi sequi nemo fugiat ex aspernatur rerum, veritatis asperiores pariatur, nulla consequatur ducimus dolorum ab facere. Earum nihil vero repellendus rem repellat vel beatae ea officia minima placeat! Sint ipsa aliquid nostrum omnis impedit dolore pariatur, enim provident amet, vitae officia ipsam vel! Esse, tenetur, hic. Possimus quae fuga dolor veritatis ad a repellendus perspiciatis numquam dolorum in, doloremque, maxime corrupti laborum nihil alias. Harum accusamus velit quaerat, ad, consequuntur sit voluptatem odit, fugit nulla, assumenda tempore accusantium excepturi aperiam maiores voluptas magni dolore natus! Repudiandae asperiores consectetur culpa aut ullam dignissimos quod itaque modi distinctio, cupiditate ea non facere, officiis at commodi voluptatem quia nobis ut rerum minima sunt excepturi in! Unde explicabo esse ipsum cumque ea omnis recusandae nisi vitae asperiores ipsa facilis minus eum voluptatum nesciunt perferendis deserunt quos harum dolor, quisquam. Sunt necessitatibus accusamus doloribus totam molestias nulla provident veritatis, quod facilis nostrum culpa laudantium, debitis et molestiae impedit, quasi expedita enim facere. Tempore corporis quia aliquam deserunt, voluptatum porro eligendi sint, eveniet commodi, perspiciatis accusantium unde reprehenderit recusandae repudiandae necessitatibus sapiente! Debitis quis quae, ipsam eaque illo quisquam dicta pariatur dolorem accusamus ipsum voluptas, aliquid illum? Eveniet porro numquam a molestiae? Pariatur quae itaque at facere eaque, porro dolore totam sunt! Ab repudiandae aperiam ipsum nisi consequatur sint. Quam esse laudantium assumenda quas asperiores veniam molestias placeat tempore sequi molestiae consequuntur obcaecati amet reprehenderit maxime neque voluptatibus minus officia, eligendi eius porro explicabo laboriosam recusandae sit incidunt nesciunt. Commodi esse a, rerum, dolorum modi nulla delectus debitis impedit rem placeat tempore. Laudantium, deserunt, reprehenderit. Similique excepturi delectus sapiente dolor neque eligendi fuga vero aperiam rem sit possimus, fugit omnis quos, voluptatem temporibus architecto quas. Ex, accusantium nulla. Eaque cupiditate deleniti accusamus vitae neque earum, possimus culpa. Dicta consequatur cum earum, distinctio aspernatur porro.
</div>
<div class="item content" data-selected="false" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem praesentium accusantium sint repudiandae iusto reiciendis, ipsum quod culpa ratione asperiores expedita repellat fugiat fugit, cumque esse sit illo perspiciatis quisquam quam, explicabo laudantium omnis enim. Aut nisi atque, reiciendis, deleniti consectetur at maiores earum voluptatibus sit id cumque qui dolorum laborum soluta rerum necessitatibus ipsa assumenda minus non praesentium magnam aliquam harum aperiam architecto. Doloremque similique reiciendis assumenda est, sunt tempore atque expedita asperiores autem aliquid, iusto quibusdam fugit esse quasi aliquam! Incidunt officiis commodi illo beatae, sunt nesciunt ipsum quidem accusantium est praesentium, magni dolorem voluptas error iusto impedit dolor possimus esse cupiditate unde accusamus voluptatem. Error omnis sed hic molestias veritatis quisquam aliquid quia mollitia illo ad eligendi sit, nam nemo necessitatibus, pariatur possimus id repellat iusto quod minima, nesciunt natus delectus dolores itaque dolore? Harum, eos, placeat, impedit nihil, neque deleniti earum quia corrupti debitis incidunt maxime!
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded",init,false);
function init () {
var container = document.querySelector('.container');
container.onclick = function(e) {
var old = container.querySelector('[data-selected="true"]');
if (old) {
old.dataset.selected = "false";
}
e.target.dataset.selected = "true";
};
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment