Skip to content
This repository has been archived by the owner on Aug 5, 2020. It is now read-only.

Commit

Permalink
Renaming accordion-controls to accordion-style, m- prefixing, and add…
Browse files Browse the repository at this point in the history 
…ing images example
  • Loading branch information
@mobifydave
mobifydave committed Aug 1, 2012
1 parent a77e90b commit 055ed01
Show file tree
Hide file tree
Showing 7 changed files with 121 additions and 61 deletions.
3 changes: 1 addition & 2 deletions www/_includes/nav-modules.html
View file
Expand Up @@ -28,14 +28,13 @@
<li>
<a href="{{ site.baseurl }}/modules/zoomable">Zoomable</a>
<ul class="hide-inactive">
<li><a href="{{ site.baseurl }}/modules/zoomable/#using-mobify-zoomablejs">Initialize</a></li>
<li><a href="{{ site.baseurl }}/modules/zoomable-examples">Examples</a></li>
<li><a href="{{ site.baseurl }}/modules/zoomable/#methods">Methods</a></li>
<li><a href="{{ site.baseurl }}/modules/zoomable/#configuration">Configuration</a></li>
<li><a href="{{ site.baseurl }}/modules/zoomable/#classes">Classes</a></li>
<li><a href="{{ site.baseurl }}/modules/zoomable/#default-styles">Default Styles</a></li>
<li><a href="{{ site.baseurl }}/modules/zoomable/#events">Events</a></li>
<li><a href="{{ site.baseurl }}/modules/zoomable/#limitations">Limitations</a></li>
<li><a href="{{ site.baseurl }}/modules/zoomable-examples">Examples</a></li>
</ul>
</li>
</ul>
Expand Down
78 changes: 58 additions & 20 deletions www/modules/accordion-examples.md
View file
Expand Up @@ -4,50 +4,88 @@ title: Mobify.js Accordion Examples
---

<link rel="stylesheet" href="{{ site.baseurl }}/static/examples/css/accordion.css">
<link rel="stylesheet" href="{{ site.baseurl }}/static/examples/css/accordion-controls.css">
<link rel="stylesheet" href="{{ site.baseurl }}/static/examples/css/accordion-style.css">

# Accordion Examples


<h2>Basic Accordion</h2>
<ul class="m-accordion">
<li class="m-item">
<h3 class="header">
<a>Tab1</a>
<h3 class="m-header">
<a>Food Trucks</a>
</h3>
<div class="content">
<div class="inner-content">
<h2>Content 1</h2>
<p>Lorem ipsum dolor sit amet, 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui icia deserunt mollit anim id est laborum.</p>
<div class="m-content">
<div class="m-inner-content">
<h2>Put a bird on it</h2>
<p>Pickled keytar ethnic flexitarian, vegan ethical sartorial 8-bit yr williamsburg. Flexitarian typewriter viral, wolf banh mi gastropub letterpress street art mcsweeney's raw denim kogi semiotics blog.</p>
</div>
</div>
</li>
<li class="m-item">
<h3 class="header">
<a>Tab2</a>
<h3 class="m-header">
<a>PBR</a>
</h3>
<div class="content">
<div class="inner-content">
<h2>Content 2</h2>
<p>Lorem ipsum dolor sit amet, 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.</p>
<div class="m-content">
<div class="m-inner-content">
<h2>Helvetica</h2>
<p> Williamsburg quinoa sartorial, tattooed VHS food truck polaroid authentic gentrify Austin readymade vinyl dreamcatcher freegan seitan.</p>
</div>
</div>
</li>
<li class="m-item">
<h3 class="header">
<a>Tab3</a>
<h3 class="m-header">
<a>Fixies</a>
</h3>
<div class="content">
<div class="inner-content">
<h2>Content 3</h2>
<p>Lorem ipsum dolor sit amet, 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui icia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui icia deserunt mollit anim id est laborum.</p>
<div class="m-content">
<div class="m-inner-content">
<h2>You probably haven't heard of them</h2>
<p>Fanny pack seitan PBR synth, kale chips master cleanse helvetica high life artisan you probably haven't heard of them. Craft beer salvia high life, art party small batch retro pickled butcher scenester kale chips brooklyn 8-bit vinyl.</p>
<p>Trust fund mustache typewriter, portland artisan irony seitan master cleanse biodiesel ethnic banh mi bushwick squid semiotics truffaut. Marfa vinyl mumblecore, selvage beard kale chips gentrify four loko gluten-free messenger bag cliche vice forage.</p>
</div>
</div>
</li>
</ul>



<h2>Basic Accordion with Images</h2>
<ul class="m-accordion m-accordion-images">
<li class="m-item">
<h3 class="m-header">
<a>Portland</a>
</h3>
<div class="m-content">
<div class="m-inner-content">
<p>Pickled keytar ethnic flexitarian, vegan ethical sartorial 8-bit yr williamsburg. Flexitarian typewriter viral, wolf banh mi gastropub letterpress street art mcsweeney's raw denim kogi semiotics blog.</p>
</div>
</div>
</li>
<li class="m-item">
<h3 class="m-header">
<a>Willamsburg</a>
</h3>
<div class="m-content">
<div class="m-inner-content">
<p> Williamsburg quinoa sartorial, tattooed VHS food truck polaroid authentic gentrify Austin readymade vinyl dreamcatcher freegan seitan.</p>
</div>
</div>
</li>
<li class="m-item">
<h3 class="m-header">
<a>Austin</a>
</h3>
<div class="m-content">
<div class="m-inner-content">
<p>Trust fund mustache typewriter, portland artisan irony seitan master cleanse biodiesel ethnic banh mi bushwick squid semiotics truffaut. Marfa vinyl mumblecore, selvage beard kale chips gentrify four loko gluten-free messenger bag cliche vice forage.</p>
</div>
</div>
</li>
</ul>




<script src="{{ site.baseurl }}/static/examples/js/accordion.js"></script>
<script>
$(function() { $('.m-accordion').accordion(); });
Expand Down
20 changes: 10 additions & 10 deletions www/modules/accordion.md
View file
Expand Up @@ -4,41 +4,41 @@ title: Mobify.js Accordion Module
---

<link rel="stylesheet" href="{{ site.baseurl }}/static/examples/css/accordion.css">
<link rel="stylesheet" href="{{ site.baseurl }}/static/examples/css/accordion-controls.css">
<link rel="stylesheet" href="{{ site.baseurl }}/static/examples/css/accordion-style.css">

# Accordion

Try it out:

<ul class="m-accordion">
<li class="m-item">
<h3 class="header">
<h3 class="m-header">
<a>Tab1</a>
</h3>
<div class="content">
<div class="inner-content">
<div class="m-content">
<div class="m-inner-content">
<h2>Content 1</h2>
<p>Lorem ipsum dolor sit amet, 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui icia deserunt mollit anim id est laborum.</p>
</div>
</div>
</li>
<li class="m-item">
<h3 class="header">
<h3 class="m-header">
<a>Tab2</a>
</h3>
<div class="content">
<div class="inner-content">
<div class="m-content">
<div class="m-inner-content">
<h2>Content 2</h2>
<p>Lorem ipsum dolor sit amet, 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.</p>
</div>
</div>
</li>
<li class="m-item">
<h3 class="header">
<h3 class="m-header">
<a>Tab3</a>
</h3>
<div class="content">
<div class="inner-content">
<div class="m-content">
<div class="m-inner-content">
<h2>Content 3</h2>
<p>Lorem ipsum dolor sit amet, 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui icia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui icia deserunt mollit anim id est laborum.</p>
Expand Down
53 changes: 39 additions & 14 deletions ...tatic/examples/css/accordion-controls.css → www/static/examples/css/accordion-style.css
View file
@@ -1,23 +1,24 @@
/* Base Style */
.m-accordion {
color: black;
}

.m-accordion .header {
.m-accordion .m-header {
height: 54px;
line-height: 52px;
padding: 0 20px;
border: solid 1px #ededed;
border-width: 1px 0;
position: relative;
cursor: pointer;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 100%); /* W3C */
line-height: 52px;
cursor: pointer;
}
.m-accordion .header:hover, .m-accordion .header:focus {
.m-accordion .m-header:hover, .m-accordion .hm-eader:focus {
z-index: 2;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 100%); /* FF3.6+ */
Expand All @@ -28,40 +29,64 @@
background: linear-gradient(to bottom, #f6f6f6 0%,#f0f0f0 100%); /* W3C */
border-bottom-color: #d6d6d6;
}
.m-accordion .m-item:first-child .header {
.m-accordion .m-item:first-child .m-header {
-webkit-border-top-left-radius: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topleft: 9px;
-moz-border-radius-topright: 9px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
}
.m-accordion .m-item:last-child .header, .m-accordion .m-active:last-child .inner-content {
.m-accordion .m-item:last-child .m-header, .m-accordion .m-active:last-child .m-inner-content {
-webkit-border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
}
.m-accordion .m-active:last-child .header {
.m-accordion .m-active:last-child .m-header {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}


.m-accordion .header a {
.m-accordion .m-header a {
color: black;
}

.m-accordion .inner-content {
.m-accordion .m-inner-content {
padding: 10px 20px;
background: white;
}

.m-accordion h2 {
margin: 0;
color: black;
text-shadow: none;
}


/* Accordion with Images */
.m-accordion-images .m-header:after {
content : "";
display: block;
position: absolute;
top: 50%;
right: 10px;
margin-top: -11px;
z-index: 9;
width: 22px;
height: 22px;
background: url(../img/accordion.png) 0 -20px no-repeat;
}
.m-accordion-images .m-active .m-header:after {
background-position: 0 -43px;
}
/* -- Retina version -- */
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.m-accordion-images .m-header:after {
background-position: -11px 0;
background-size: 33px 43px;
}
.m-accordion-images .m-active .m-header:after {
background-position: -11px -22px;
}
}
18 changes: 8 additions & 10 deletions www/static/examples/css/accordion.css
View file
Expand Up @@ -5,21 +5,19 @@
list-style: none;
margin: 0;
}

.m-accordion .content {
-webkit-transition: max-height 1s ease;
-moz-transition: max-height 1s ease;
-o-transition: max-height 1s ease;
transition: max-height 1s ease;
.m-accordion .m-content {
-webkit-transition: max-height 0.5s ease;
-moz-transition: max-height 0.5s ease;
-o-transition: max-height 0.5s ease;
transition: max-height 0.5s ease;
overflow: hidden;
max-height: 0;
}

.m-accordion .m-active .content {
.m-accordion .m-active .cm-ontent {
max-height: 10000px; /* IE hack */
}

.m-accordion .header {
.m-accordion .m-header {
z-index: 1;
position: relative;
margin-top: -1px;
Expand All @@ -30,6 +28,6 @@
margin: 0;
}

.m-accordion .header > a {
.m-accordion .m-header > a {
pointer-events: none;
}
Binary file added www/static/examples/img/accordion.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 5 additions & 5 deletions www/static/examples/js/accordion.js
View file
Expand Up @@ -124,13 +124,13 @@ Mobify.UI.Accordion = (function($, Utils) {
function close($item) {
$item.removeClass('m-opened');
$item.addClass('m-closed')
var $content = $item.find('.content');
var $content = $item.find('.m-content');
if(!Utils.events.transitionend) $item.toggleClass('m-active');
$content.css('max-height', 0)
};

function open($item) {
var $content = $item.find('.content');
var $content = $item.find('.m-content');
$item.toggleClass('m-active');
$item.removeClass('m-closed');
$item.addClass('m-opened')
Expand Down Expand Up @@ -180,21 +180,21 @@ Mobify.UI.Accordion = (function($, Utils) {

// Open items that are hash linked
var hash = location.hash;
var $hashitem = $element.find('.header a[href="'+hash+'"]');
var $hashitem = $element.find('.m-header a[href="'+hash+'"]');

if ($hashitem.length) {
open($hashitem.parent());
}

// bind events
$element.find('.header')
$element.find('.m-header')
.on(Utils.events.down, down)
.on(Utils.events.move, move)
.on(Utils.events.up, up)
.on('click', click);

if (Utils.events.transitionend) {
$element.find('.content').on(Utils.events.transitionend, endTransition);
$element.find('.m-content').on(Utils.events.transitionend, endTransition);
}

};
Expand Down

0 comments on commit 055ed01

Please sign in to comment.