From 623ef3de9fa0202d3123fa8daf77d1936528705b Mon Sep 17 00:00:00 2001 From: Lonewolf Date: Fri, 28 Mar 2014 11:32:36 +0530 Subject: [PATCH] Updated sass variables Created new page for javascript variables --- .../examples_accordion_javascript_options.html | 11 +++++++++++ .../examples_accordion_variables.html | 4 +++- doc/pages/components/accordion.html | 18 ++++++++++++++++++ 3 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 doc/includes/accordion/examples_accordion_javascript_options.html diff --git a/doc/includes/accordion/examples_accordion_javascript_options.html b/doc/includes/accordion/examples_accordion_javascript_options.html new file mode 100644 index 000000000..9b9f8b846 --- /dev/null +++ b/doc/includes/accordion/examples_accordion_javascript_options.html @@ -0,0 +1,11 @@ +{{#markdown}} +```javascript +$(document).foundation({ + accordion : { + active_class: 'active', + multi_expand: false, + toggleable: true + } +}); +``` +{{/markdown}} diff --git a/doc/includes/accordion/examples_accordion_variables.html b/doc/includes/accordion/examples_accordion_variables.html index 653ee85dd..cda2630d8 100644 --- a/doc/includes/accordion/examples_accordion_variables.html +++ b/doc/includes/accordion/examples_accordion_variables.html @@ -1,5 +1,7 @@ {{#markdown}} ```scss +$include-html-accordion-classes: $include-html-classes; + $accordion-navigation-padding: rem-calc(16); $accordion-navigation-bg-color: #efefef; $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%); @@ -11,4 +13,4 @@ $accordion-navigation-font-family: $body-font-family; $accordion-content-padding: $column-gutter/2; $accordion-content-active-bg-color: #fff; ``` -{{/markdown}} \ No newline at end of file +{{/markdown}} diff --git a/doc/pages/components/accordion.html b/doc/pages/components/accordion.html index c8165d060..bbabd1feb 100644 --- a/doc/pages/components/accordion.html +++ b/doc/pages/components/accordion.html @@ -62,6 +62,24 @@ Accordions can be easily customized with the Sass variables provided in the `_se *** +## Configure With Javascript + +It's easy to configure dropdowns using our provided Javascript. You can use data-attributes or plain old Javascript. Make sure `jquery.js` `foundation.js` and `foundation.accordion.js` have been included on your page before continuing. For example, add the following before the closing `` tag: + +{{#markdown}} + ```html + + + + ``` +{{/markdown}} + +### Optional Javascript Configuration + +{{> examples_accordion_javascript_options}} + +*** + ##### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file: -- 2.47.2