Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Accordions now smoother and JS based (deeper browser support)

  • Loading branch information...
commit 3e917841bce33469713b14a125ae2e62742eed2e 1 parent 466296b
@chriscoyier authored
View
41 css/accordion.css
@@ -21,27 +21,17 @@
.cloak {
visibility: hidden;
}
-.disabled {
+.disabled, :disabled {
opacity: 0.5;
}
/* Not as smooth as I might like.
Max heigh transition for fluid content is kinda blahhhhh */
.key {
background: #8A867A;
- max-height: 42px;
border-bottom: 1px solid #C2C1BB;
- -webkit-transition: max-height 0.4s ease-out;
- -moz-transition: max-height 0.4s ease-out;
- -ms-transition: max-height 0.4s ease-out;
- -o-transition: max-height 0.4s ease-out;
- -webkit-transition: max-height 0.4s ease-out;
- -moz-transition: max-height 0.4s ease-out;
- -ms-transition: max-height 0.4s ease-out;
- -o-transition: max-height 0.4s ease-out;
}
.key.open {
background: #9E9B90;
- max-height: 600px;
cursor: default;
}
.key a {
@@ -185,33 +175,12 @@
/* Content */
.key section {
color: white;
- position: absolute;
- top: -9999px;
- left: -9999px;
+ height: 0;
+ overflow: hidden;
padding: 0 10px;
}
-.key.open section {
- position: static;
-}
-/* Static height accordions */
-.static .key {
- height: 3.2em;
- -webkit-transition: height 0.35s ease-out;
- -moz-transition: height 0.35s ease-out;
- -ms-transition: height 0.35s ease-out;
- -o-transition: height 0.35s ease-out;
- -webkit-transition: height 0.35s ease-out;
- -moz-transition: height 0.35s ease-out;
- -ms-transition: height 0.35s ease-out;
- -o-transition: height 0.35s ease-out;
- max-height: none;
-}
-.static .key.open {
- height: 33em;
-}
-.static .key section {
- overflow-y: auto;
- height: 29em;
+#panel-1 {
+ height: auto;
}
/* Scrollbars */
.static .key section::-webkit-scrollbar {
View
26 css/accordion.less
@@ -7,14 +7,12 @@
.key {
background: #8A867A;
- max-height: 42px;
border-bottom: 1px solid #C2C1BB;
- .transition(max-height 0.4s ease-out);
+ // .transition(max-height 0.4s ease-in);
}
.key.open {
background: #9E9B90;
- max-height: 600px;
cursor: default;
}
@@ -103,26 +101,12 @@
/* Content */
.key section {
color: white;
- .screen-reader-text();
+ height: 0;
+ overflow: hidden;
padding: 0 10px;
}
-.key.open section {
- position: static;
-}
-
-/* Static height accordions */
-.static .key {
- height: 3.2em;
- .transition(height 0.35s ease-out);
- max-height: none;
-}
-.static .key.open {
- height: 33em;
-}
-.static .key section {
- overflow-y: auto;
- height: 29em;
-
+#panel-1 {
+ height: auto;
}
/* Scrollbars */
View
2  css/button-menus.css
@@ -21,7 +21,7 @@
.cloak {
visibility: hidden;
}
-.disabled {
+.disabled, :disabled {
opacity: 0.5;
}
a[data-menu].open {
View
2  css/tabs.css
@@ -21,7 +21,7 @@
.cloak {
visibility: hidden;
}
-.disabled {
+.disabled, :disabled {
opacity: 0.5;
}
/* Default */
View
2  css/toolbox.less
@@ -26,6 +26,6 @@
visibility: hidden;
}
-.disabled {
+.disabled, :disabled {
opacity: 0.5;
}
View
33 includes/accordions.html
@@ -19,9 +19,11 @@ <h2 id="accordion">Accordion <a href="#top" class="back-to-top">^ Back to Top</a
<tr>
<th>Flexible Growth</th>
<td>
+
<aside class="accordion multiple">
- <div class="key">
- <h3 data-panel="ac1">
+
+ <div class="key" id="key-1">
+ <h3>
<a class="press" href="#panel-1">First Key</a>
<div class="q q-on-dark">
<span>?</span>
@@ -32,14 +34,13 @@ <h3 data-panel="ac1">
</div>
</div>
</h3>
-
- <section id="panel-1">
+ <section id="key-1-section">
<p>Bacon ipsum dolor sit amet ham fatback venison, bacon pork loin pancetta pork tongue leberkäse pig short loin chicken. Chuck pancetta rump shoulder pork loin. Ground round turkey pig, prosciutto swine biltong jowl ribeye spare ribs.</p>
- </section><!-- #ac1 -->
- </div><!-- ac3 key -->
+ </section>
+ </div><!-- key -->
<div class="key">
- <h3 data-panel="ac2">
+ <h3>
<a class="press" href="#panel-2">Second Key</a>
<div class="q q-on-dark">
<span>?</span>
@@ -50,14 +51,13 @@ <h3 data-panel="ac2">
</div>
</div>
</h3>
-
- <section id="panel-2">
+ <section id="key-2-section">
<p>Bacon ipsum dolor sit amet ham fatback venison, bacon pork loin pancetta pork tongue leberkäse pig short loin chicken. Chuck pancetta rump shoulder pork loin. Ground round turkey pig, prosciutto swine biltong jowl ribeye spare ribs. Jerky capicola bacon shank bresaola. Meatloaf rump t-bone, corned beef strip steak chuck hamburger pork chop sirloin ham hock drumstick ham spare ribs short ribs. Capicola sausage tri-tip turkey t-bone, venison chicken. Rump filet mignon flank kielbasa, biltong tenderloin strip steak hamburger chuck shankle tail shank.</p>
</section><!-- #ac2 -->
</div><!-- ac2 key -->
- <div class="key">
- <h3 data-panel="ac3">
+ <div class="key" id="key-2">
+ <h3>
<a class="press" href="#panel-3">Third Key</a>
<div class="q q-on-dark">
<span>?</span>
@@ -68,15 +68,18 @@ <h3 data-panel="ac3">
</div>
</div>
</h3>
-
- <section id="panel-3">
+ <section id="key-3-section">
<p>Bacon ipsum dolor sit amet ham fatback venison, bacon pork loin pancetta pork tongue leberkäse pig short loin chicken. Chuck pancetta rump shoulder pork loin. Ground round turkey pig, prosciutto swine biltong jowl ribeye spare ribs. Jerky capicola bacon shank bresaola. Meatloaf rump t-bone, corned beef strip steak chuck hamburger pork chop sirloin ham hock drumstick ham spare ribs short ribs. Capicola sausage tri-tip turkey t-bone, venison chicken. Rump filet mignon flank kielbasa, biltong tenderloin strip steak hamburger chuck shankle tail shank.</p>
<p>Bacon ipsum dolor sit amet ham fatback venison, bacon pork loin pancetta pork tongue leberkäse pig short loin chicken. Chuck pancetta rump shoulder pork loin. Ground round turkey pig, prosciutto swine biltong jowl ribeye spare ribs. Jerky capicola bacon shank bresaola. Meatloaf rump t-bone, corned beef strip steak chuck hamburger pork chop sirloin ham hock drumstick ham spare ribs short ribs. Capicola sausage tri-tip turkey t-bone, venison chicken. Rump filet mignon flank kielbasa, biltong tenderloin strip steak hamburger chuck shankle tail shank.</p>
- </section><!-- #ac3 -->
- </div><!-- ac3 key -->
+ </section>
+ </div>
+
</aside> <!-- accordion multiple flexible -->
+
</td>
+
<td>
+
<aside class="accordion single">
<div class="key">
<h3 data-panel="ac4">
View
37 index.html
@@ -576,9 +576,9 @@
<br><br>
- <a href="#" class="btn btn-arrow btn-arrow-right btn-arrow-small-vert btn-arrow-small-down-dark disabled" data-menu="menu-3">Button<span></span></a>
+ <a href="#" class="btn btn-arrow btn-arrow-right btn-arrow-small-vert btn-arrow-small-down-dark disabled" data-menu="menu-6">Button<span></span></a>
- <ul class="button-menu" id="menu-3">
+ <ul class="button-menu" id="menu-6">
<li><a href="#">State A</a></li>
<li><a href="#">State B</a></li>
<li><a href="#">State C</a></li>
@@ -1717,9 +1717,11 @@ <h6 class="bar">h6. Bar (any header can be bar)</h6>
<tr>
<th>Flexible Growth</th>
<td>
+
<aside class="accordion multiple">
- <div class="key">
- <h3 data-panel="ac1">
+
+ <div class="key" id="key-1">
+ <h3>
<a class="press" href="#panel-1">First Key</a>
<div class="q q-on-dark">
<span>?</span>
@@ -1730,14 +1732,13 @@ <h3 data-panel="ac1">
</div>
</div>
</h3>
-
- <section id="panel-1">
+ <section id="key-1-section">
<p>Bacon ipsum dolor sit amet ham fatback venison, bacon pork loin pancetta pork tongue leberkäse pig short loin chicken. Chuck pancetta rump shoulder pork loin. Ground round turkey pig, prosciutto swine biltong jowl ribeye spare ribs.</p>
- </section><!-- #ac1 -->
- </div><!-- ac3 key -->
+ </section>
+ </div><!-- key -->
<div class="key">
- <h3 data-panel="ac2">
+ <h3>
<a class="press" href="#panel-2">Second Key</a>
<div class="q q-on-dark">
<span>?</span>
@@ -1748,14 +1749,13 @@ <h3 data-panel="ac2">
</div>
</div>
</h3>
-
- <section id="panel-2">
+ <section id="key-2-section">
<p>Bacon ipsum dolor sit amet ham fatback venison, bacon pork loin pancetta pork tongue leberkäse pig short loin chicken. Chuck pancetta rump shoulder pork loin. Ground round turkey pig, prosciutto swine biltong jowl ribeye spare ribs. Jerky capicola bacon shank bresaola. Meatloaf rump t-bone, corned beef strip steak chuck hamburger pork chop sirloin ham hock drumstick ham spare ribs short ribs. Capicola sausage tri-tip turkey t-bone, venison chicken. Rump filet mignon flank kielbasa, biltong tenderloin strip steak hamburger chuck shankle tail shank.</p>
</section><!-- #ac2 -->
</div><!-- ac2 key -->
- <div class="key">
- <h3 data-panel="ac3">
+ <div class="key" id="key-2">
+ <h3>
<a class="press" href="#panel-3">Third Key</a>
<div class="q q-on-dark">
<span>?</span>
@@ -1766,15 +1766,18 @@ <h3 data-panel="ac3">
</div>
</div>
</h3>
-
- <section id="panel-3">
+ <section id="key-3-section">
<p>Bacon ipsum dolor sit amet ham fatback venison, bacon pork loin pancetta pork tongue leberkäse pig short loin chicken. Chuck pancetta rump shoulder pork loin. Ground round turkey pig, prosciutto swine biltong jowl ribeye spare ribs. Jerky capicola bacon shank bresaola. Meatloaf rump t-bone, corned beef strip steak chuck hamburger pork chop sirloin ham hock drumstick ham spare ribs short ribs. Capicola sausage tri-tip turkey t-bone, venison chicken. Rump filet mignon flank kielbasa, biltong tenderloin strip steak hamburger chuck shankle tail shank.</p>
<p>Bacon ipsum dolor sit amet ham fatback venison, bacon pork loin pancetta pork tongue leberkäse pig short loin chicken. Chuck pancetta rump shoulder pork loin. Ground round turkey pig, prosciutto swine biltong jowl ribeye spare ribs. Jerky capicola bacon shank bresaola. Meatloaf rump t-bone, corned beef strip steak chuck hamburger pork chop sirloin ham hock drumstick ham spare ribs short ribs. Capicola sausage tri-tip turkey t-bone, venison chicken. Rump filet mignon flank kielbasa, biltong tenderloin strip steak hamburger chuck shankle tail shank.</p>
- </section><!-- #ac3 -->
- </div><!-- ac3 key -->
+ </section>
+ </div>
+
</aside> <!-- accordion multiple flexible -->
+
</td>
+
<td>
+
<aside class="accordion single">
<div class="key">
<h3 data-panel="ac4">
View
74 js/accordion.js
@@ -1,5 +1,32 @@
(function($) {
+ var speed = 200;
+
+ jQuery.fn.animateAuto = function(prop, speed, callback) {
+
+ var elem, height, width;
+
+ return this.each(function(i, el) {
+
+ el = jQuery(el), elem = el.clone().css({
+ "height":"auto",
+ "width":"auto"})
+ .appendTo(el.parent()); // weird? didn't work when appending to body
+
+ height = elem.outerHeight(),
+ width = elem.outerWidth();
+ elem.remove();
+
+ if (prop === "height")
+ el.animate({"height": height}, speed, callback);
+ else if (prop === "width")
+ el.animate({"width": width}, speed, callback);
+ else if (prop === "both")
+ el.animate({"width": width,"height": height}, speed, callback);
+ });
+
+ }
+
var doc = $(document),
el, panelToClose, panelToOpen, clickedPanel,
parentAccordion, anyPanelsOpen;
@@ -28,7 +55,7 @@
if (clickedPanel.hasClass("open")) {
- base.closePanel(el.data("panel"));
+ base.closePanel(clickedPanel);
} else {
@@ -36,10 +63,10 @@
// There is an open panel
if (anyPanelsOpen.length) {
- base.closePanel(anyPanelsOpen.find("> h3").data("panel"));
+ base.closePanel(anyPanelsOpen);
};
- base.openPanel(el.data("panel"));
+ base.openPanel(clickedPanel);
};
@@ -54,9 +81,9 @@
clickedPanel = el.closest(".key");
if (clickedPanel.hasClass("open")) {
- base.closePanel(el.data("panel"));
+ base.closePanel(clickedPanel);
} else {
- base.openPanel(el.data("panel"));
+ base.openPanel(clickedPanel);
};
});
@@ -72,21 +99,36 @@
// If you need the open/close to behave like the type of slider it is
// (e.g. "single" or "multiple") may be better to trigger click on the h3 element
- base.openPanel = function(panelClass) {
-
- el = $("[data-panel=" + panelClass + "]");
-
- el.closest(".key").addClass("open");
- doc.trigger(panelClass + "-open", el);
+ base.openPanel = function(el) {
+
+ el.addClass("open")
+
+ if (el.closest(".accordion").hasClass("static")) {
+
+ el
+ .find("> section")
+ .animate({"height": 400}, speed);
+
+ } else {
+
+ el
+ .find("> section")
+ .animateAuto("height", speed);
+
+ }
+
+ doc.trigger(el.attr('id') + "-open", el);
};
- base.closePanel = function(panelClass) {
-
- el = $("[data-panel=" + panelClass + "]");
+ base.closePanel = function(el) {
- el.closest(".key").removeClass("open");
- doc.trigger(panelClass + "-close", el);
+ el
+ .removeClass("open")
+ .find("> section")
+ .animate({"height": 0}, speed);
+
+ doc.trigger(el.attr('id') + "-close", el);
};
Please sign in to comment.
Something went wrong with that request. Please try again.