Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Wording updates, another Accordion example

  • Loading branch information...
commit 401ec0d8a0b8c3fbd7e639fd9a0845adea069034 1 parent 61359b3
@mobifydave mobifydave authored
View
2  www/_layouts/module-index.html
@@ -18,7 +18,7 @@
<li class="accordion">
<a href="{{ site.baseurl }}/modules/accordion">
<h3>Accordion</h3>
- <p>{description needed}</p>
+ <p>An expanding accordion menu for two-level nav systems.</p>
</a>
</li>
<li class="zoomable">
View
43 www/modules/accordion-examples.md
@@ -10,6 +10,7 @@ title: Mobify.js Accordion Examples
<h2>Basic Accordion</h2>
+<p>The basic accordion control with default styling.</p>
<ul class="m-accordion">
<li class="m-item">
<h3 class="m-header">
@@ -49,8 +50,9 @@ title: Mobify.js Accordion Examples
-<h2>Basic Accordion with Images</h2>
-<ul class="m-accordion m-accordion-images">
+<h2>Image Indicators</h2>
+<p>The basic accordion control with images to reveal when a header is expanded or collapsed.</p>
+<ul class="m-accordion m-indicators-images">
<li class="m-item">
<h3 class="m-header">
<a>Portland</a>
@@ -84,6 +86,43 @@ title: Mobify.js Accordion Examples
</ul>
+<h2>CSS Indicators</h2>
+<p>The basic accordion control with image-less CSS indicators that reveal when a header is expanded or collapsed.</p>
+<ul class="m-accordion m-indicators-css">
+ <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>
View
2  www/modules/accordion.md
@@ -8,7 +8,7 @@ title: Mobify.js Accordion Module
# Accordion
-Try it out:
+An expanding accordion menu for two-level nav systems.
<ul class="m-accordion">
<li class="m-item">
View
4 www/modules/index.md
@@ -12,7 +12,7 @@ Mobify.js-powered site.
All modules require either the [Zepto](http://zeptojs.com/) or [jQuery](http://jquery.com/) library.
-All modules available on GitHub and published under an [MIT license]({{ site.baseurl }}/license/):
+All modules available on [GitHub](https://github.com/mobify/mobifyjs/modules) and published under an [MIT license]({{ site.baseurl }}/license/):
+
-[github.com/mobify/mobifyjs/modules](https://github.com/mobify/mobifyjs/modules)
View
1  www/static/css/ui-dev.css
@@ -1089,6 +1089,7 @@ table td code {
.widget-gallery {
overflow: hidden;
clear: left;
+ padding-top: 2em;
}
.widget-gallery li {
margin: 0 2% 2% 0;
View
29 www/static/examples/css/accordion-style.css
@@ -65,7 +65,7 @@
/* Accordion with Images */
-.m-accordion-images .m-header:after {
+.m-indicators-images .m-header:after {
content : "";
display: block;
position: absolute;
@@ -77,16 +77,35 @@
height: 22px;
background: url(../img/accordion.png) 0 -20px no-repeat;
}
- .m-accordion-images .m-active .m-header:after {
+ .m-indicators-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 {
+ .m-indicators-images .m-header:after {
background-position: -11px 0;
background-size: 33px 43px;
}
- .m-accordion-images .m-active .m-header:after {
+ .m-indicators-images .m-active .m-header:after {
background-position: -11px -22px;
}
-}
+
+/* Accordion with CSS indicators */
+.m-indicators-css .m-header:after {
+ content : "+";
+ color: #999;
+ text-shadow: #fff 0 1px 0;
+ display: block;
+ position: absolute;
+ top: 50%;
+ right: 15px;
+ margin-top: -13px;
+ z-index: 9;
+ font-size: 26px;
+ line-height: 22px;
+ font-weight: bold;
+}
+ .m-indicators-css .m-active .m-header:after {
+ content: "\2212"; /* Unicode minus sign */
+ }
Please sign in to comment.
Something went wrong with that request. Please try again.