Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/Funky Pure CSS Accordion.markdown

Forked from anonymous/Funky Pure CSS Accordion.markdown
Created May 31, 2016 06:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save CodeMyUI/35e73414ff1ab5a885cc149a624d19ff to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save CodeMyUI/35e73414ff1ab5a885cc149a624d19ff to your computer and use it in GitHub Desktop.
Download ZIP
Funky Pure CSS Accordion
Raw
Funky Pure CSS Accordion.markdown
Raw
index.haml
- @tabs = [{:c => 'checked', :tab => '1', :time => '8am - 10am', :title => 'Jamie talks design', :schedule => 'Monday - Thursday',:description => 'I talk a bunch of rubbish', :icon => 'ion-android-color-palette'},{:c => 'false', :tab => '2', :time => '10am - 12am', :title => 'Arctic Monkeys Live', :schedule => 'Monday - Wednesday',:description => 'Music for your lug holes', :icon => 'ion-music-note'},{:c => 'false', :tab => '3', :time => '12am - 4pm', :title => 'Steven Fry podcast', :schedule => 'Staurday - Sunday',:description => 'Steven Fry says words', :icon => 'ion-android-microphone'},{:c => 'false', :tab => '4', :time => '4pm - 8pm', :title => 'Massive event', :schedule => 'Monday - Friday',:description => 'Some kind of music festival', :icon => 'ion-android-bar'}]
.left
.left_inner
%h1 Funky Pure CSS Accordion
%h2 Go on, give it some clicks
%a.download{:href => 'http://codepen.io/jcoulterdesign/pens/popular/',:target => '_blank'}
<i class="icon ion-eye"></i> <span>View my other pens</span>
%a.follow{:href => 'http://codepen.io/jcoulterdesign/',:target => '_blank'}
<i class="icon ion-social-codepen-outline"></i> <span>Follow me on codepen</span>
.right
.app
.app_inner
- @tabs.each do |i|
%input{:type => 'radio',:id => "tab-#{i[:tab]}",:name => 'buttons', :"#{i[:c]}" => ""}
%label{:for => "tab-#{i[:tab]}"}
.app_inner__tab
%h2
%i.icon.ion-android-alarm-clock
#{i[:time]}
.tab_left
%i.icon.big{:class => "#{i[:icon]}"}
.tab_left__image
%i.icon{:class => "#{i[:icon]}"}
.tab_right
%h3 #{i[:title]}
%h4 #{i[:schedule]}
%p #{i[:description]}
%button More information
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
Raw
style.scss
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300);
*{
box-sizing:border-box;
}
body{
background: #292B31;
overflow:hidden;
font-family: 'Roboto Condensed', sans-serif;
.left{
float:left;
width:50%;
height:100vh;
position:Relative;
&_inner{
width:340px;
margin:0 auto;
transform:translateY(-50%);
height: 414px;
position:absolute;
right:20px;
top:50%;
h1{
color:white;
font-size:28px;
margin:120px 0px 0px 0px
}
h2{
color: rgb(118, 123, 138);
font-size:22px;
font-weight:200;
margin:0px 0px 0px 0px
}
}
}
.right{
float:right;
position:relative;
width:50%;
height:100vh;
}
}
.app{
border-radius: 10px;
width:340px;
margin:0 auto;
height: 414px;
position:absolute;
left:0;
top:50%;
box-shadow: 4px 5px 0px rgba(0, 0, 0, 0.11);
animation:intro .34s .4s cubic-bezier(1.000, 1.400, 0.410, 1.010) forwards ;
transform:translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(10deg);
margin:auto;
overflow:hidden;
font-family: 'Roboto Condensed', sans-serif;
&_inner{
position:relative;
input[type="radio"]{
display:none;
}
input[type="radio"]:checked + label .app_inner__tab{
height:175px;
}
input[type="radio"]:checked + label .app_inner__tab .tab_right{
top:39px;
transition:all .3s .2s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
input[type="radio"]:not(checked) + label .app_inner__tab{
height:80px;
border-left: 12px solid rgba(0, 0, 0, 0.12);
}
input[type="radio"]:not(checked) + label .app_inner__tab .tab_right{
top:200px;
transition:all .3s .3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
input[type="radio"]:checked + label .app_inner__tab .tab_left .tab_left__image{
animation: move_in .55s .05s cubic-bezier(0.455, 0.030, 0.515, 0.955) forwards;
transition:all .3s .36s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
input[type="radio"]:not(checked) + label .app_inner__tab .tab_left .tab_left__image{
animation: move_out .75s .0s cubic-bezier(0.455, 0.030, 0.515, 0.955) forwards;
transition:all .3s .3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
input[type="radio"]:checked + label .app_inner__tab .tab_left .big{
left:260px;
}
input[type="radio"]:not(checked) + label .app_inner__tab .tab_left .big{
left:400px;
}
input[type="radio"]:checked + label .app_inner__tab h2 i{
opacity:0;
}
input[type="radio"]:not(checked) + label .app_inner__tab h2 i{
opacity:.3;
}
label{
display:block;
width:100%;
&:nth-of-type(1) .app_inner__tab{
background:#99b998;
&:hover{
transition:all .2s;
background:darken(#99b998,4%);
}
height:200px;
.tab_left__image{
background:#EA495F
}
}
&:nth-of-type(2) .app_inner__tab{
background:#E4B794;
&:hover{
transition:all .2s;
background:darken(#E4B794,4%);
}
.tab_left__image{
background:#99B998
}
}
&:nth-of-type(3) .app_inner__tab{
background:#f4837d;
&:hover{
transition:all .2s;
background:darken(#f4837d,4%);
}
.tab_left__image{
background:#E4B794
}
}
&:nth-of-type(4) .app_inner__tab{
background:#ea495f;
&:hover{
transition:all .2s;
background:darken(#ea495f,4%);
}
.tab_left__image{
background:#F4837D
}
}
}
&__tab{
width:100%;
height:80px;
background:red;
cursor:pointer;
overflow:hidden;
position:relative;
transition:all .65s cubic-bezier(1.000, 0.000, 0.410, 1.010);
h2{
position: absolute;
right: 20px;
top: 16px;
color: rgb(26, 28, 29);
font-size: 18px;
i{
position: absolute;
right: 271px;
opacity:0.3;
transition:all .3s;
}
}
.tab_right{
width:60%;
float:right;
position:relative;
top:200px;
text-align:right;
padding: 20px;
h3,h4,p{
margin:0;
}
h3{
font-size: 14px;
color: rgba(0, 0, 0, 0.65);
}
h4{
font-size: 12px;
margin: 4px 0px;
color: rgba(0, 0, 0, 0.33);
}
p{
font-size: 11px;
color: white;
}
button{
margin-top: 10px;
border: 2px solid white;
background: none;
border-radius: 5px;
padding: 6px 20px;
cursor: pointer;
font-family: 'Roboto Condensed', sans-serif;
outline:none;
font-size: 11px;
color: white;
transition:all .3s;
&:hover{
background:white;
color:black;
}
}
}
.tab_left{
width:30%;
float:left;
position:relative;
.big{
position: absolute;
top: -17px;
transition:all .3s .3s;
left: 390px;
font-size: 180px;
opacity: 0.08;
}
&__image{
position: relative;
top: -100px;
text-align: center;
background: white;
left: 47px;
border-radius: 20px;
width: 80px;
height: 80px;
i{
color: white;
font-size: 40px;
top: 18px;
position: relative;
}
}
}
}
}
}
// Animations
@keyframes move_out{
0%{top:47px;}
100%{top:200px;}
}
@keyframes move_in{
0%{top:-200px;}
100%{top:47px;}
}
@keyframes bump{
0%{top:16px;}
25%{top:13px;}
50%{top:16px;}
75%{top:13px;}
100%{top:16px;}
}
@keyframes intro{
0%{transform: translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(40deg)}
100%{transform: translateY(-50%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
}
a.download,a.follow{i{margin-right:10px;}text-align:center;margin-top:13px;width:300px;
float:left;display: inline-block;padding: 16px 30px;background: #EA495F;color: white;font-weight: 900;font-family: 'Roboto Condensed', sans-serif;text-decoration: none;border-radius: 4px;margin-right:12px;}
a.follow{
float:left;padding: 14px 30px;background: none;color: white;border:2px solid white;&:hover{color:#41EFB6;border-color:#41EFB6;}}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment