Skip to content
This repository has been archived by the owner on Jan 31, 2018. It is now read-only.

Commit

Permalink
Merge pull request #29 from himedlooff/gh-pages
Browse files Browse the repository at this point in the history 
Updated to use cf-core and new docs template and adds dynamic animation duration based on content height
  • Loading branch information
@Scotchester
Scotchester committed Aug 11, 2014
2 parents 4759112 + c327735 commit 609bb2f
Show file tree
Hide file tree
Showing 16 changed files with 7,848 additions and 3,351 deletions.
5 changes: 2 additions & 3 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "cf-expandables",
"version": "0.3.5",
"version": "0.4.0",
"description": "Standard expandable (show/hide) component for Capital Framework.",
"keywords": ["capital-framework", "capital", "expandables", "jquery", "js", "less"],
"authors": [
Expand All @@ -18,9 +18,8 @@
"main": "src/js/cf-expandables.js",
"dependencies": {
"cf-buttons": "git://github.com/cfpb/cf-buttons.git",
"cf-colors": "git://github.com/cfpb/cf-colors.git",
"cf-core": "git://github.com/cfpb/cf-core.git",
"cf-icons": "git://github.com/cfpb/cf-icons.git",
"cf-typography": "git://github.com/cfpb/cf-typography.git",
"jquery": "~1.11.0",
"jquery.easing": "~1.3.0",
"normalize-css": "~3.0.0",
Expand Down
152 changes: 39 additions & 113 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,26 @@
<script src="static/demo/html5shiv-printshiv.js"></script><![endif]-->
</head>
<body style="padding:4px;">
<div id="barebones-expandable">
<div id="recommended-expandable-pattern">
<div>
<div>
<div class="expandable">
<a class="expandable_target"
href="#expandable-barebones-content">
<span class="expandable_cue-open">
Show
<div class="expandable expandable__padded">
<button class="expandable_header expandable_target">
<span class="expandable_header-left expandable_label">
Expandable Header
</span>
<span class="expandable_cue-close">
Hide
<span class="expandable_header-right expandable_link">
<span class="expandable_cue-open">
Show
<span class="cf-icon cf-icon-plus-round"></span>
</span>
<span class="expandable_cue-close">
Hide
<span class="cf-icon cf-icon-minus-round"></span>
</span>
</span>
</a>
<div class="expandable_content" id="expandable-barebones-content">
</button>
<div class="expandable_content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Neque ipsa voluptatibus soluta nobis unde quisquam
Expand All @@ -41,19 +47,20 @@
</div>
</div><br>
</div>
</div>
<div id="barebones-expandable">
<div>
<div>
<div class="expandable expandable__expanded">
<a class="expandable_target"
href="#expandable-expanded-by-default-content">
<div class="expandable">
<button class="expandable_target">
<span class="expandable_cue-open">
Show
</span>
<span class="expandable_cue-close">
Hide
</span>
</a>
<div class="expandable_content" id="expandable-expanded-by-default-content">
</button>
<div class="expandable_content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Neque ipsa voluptatibus soluta nobis unde quisquam
Expand All @@ -65,121 +72,40 @@
</div>
</div><br>
</div>
</div>
<div id="expandable-header">
<div>
<div>
<div class="expandable expandable__expanded">
<div class="expandable_header">
<span class="expandable_header-left">
<em>Now you can put some info on the left and right.</em>
</span>
<span class="expandable_header-right">
<a class="expandable_target"
href="#expandable-header-content">
<span class="expandable_cue-open">
Show
</span>
<span class="expandable_cue-close">
Hide
</span>
</a>
</span>
</div>
<div class="expandable_content" id="expandable-header-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Neque ipsa voluptatibus soluta nobis unde quisquam
temporibus magnam debitis quidem. Ducimus ratione
corporis nesciunt earum vel est quaerat blanditiis
dolore ipsa?
</p>
</div>
</div>
</div><br>
</div>
<div>
<div>
<div class="expandable expandable__expanded">
<div class="expandable_header expandable_header__spaced">
<a class="expandable_target"
href="#expandable-header-spaced-content">
<span class="expandable_cue-open">
Show
</span>
<span class="expandable_cue-close">
Hide
</span>
</a>
</div>
<div class="expandable_content"
id="expandable-header-spaced-content"
style="background-color:#ccc;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Neque ipsa voluptatibus soluta nobis unde quisquam
temporibus magnam debitis quidem. Ducimus ratione
corporis nesciunt earum vel est quaerat blanditiis
dolore ipsa?
</p>
</div>
</div>
</div><br>
<div></div><br>
</div>
</div>
<div id="expandable-text-elements">
<div>
<div>
<span class="expandable_label">
Expandable label
Lorem ipsum
</span>
</div><br>
</div>
<div>
<div>
<a href="#expandable-text-elements" class="expandable_link">
Expandable link
<span class="expandable_cue-open">
<span class="cf-icon cf-icon-plus-round"></span>
</span>
<span class="expandable_cue-close">
<span class="cf-icon cf-icon-minus-round"></span>
</span>
</a>
<span class="expandable_link">
Lorem ipsum
</span>
</div><br>
</div>
</div>
<div id="padded-expandable">
<div id="expandable-header-elements">
<div>
<div>
<div class="expandable expandable__padded">
<a class="expandable_target expandable_header"
href="#expandable-padded-content">
<span class="expandable_label expandable_header-left">
Expandable Header
</span>
<span class="expandable_link expandable_header-right">
<span class="expandable_cue-open">
Show
<span class="cf-icon cf-icon-plus-round"></span>
</span>
<span class="expandable_cue-close">
Hide
<span class="cf-icon cf-icon-minus-round"></span>
</span>
</span>
</a>
<div class="expandable_content" id="expandable-padded-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Neque ipsa voluptatibus soluta nobis unde quisquam
temporibus magnam debitis quidem. Ducimus ratione
corporis nesciunt earum vel est quaerat blanditiis
dolore ipsa?
</p>
<div></div><br>
</div>
<div>
<div></div><br>
</div>
<div>
<div></div><br>
</div>
</div>
</div>
</div><br>
<div id="padded-expandable-modifier">
<div>
<div></div><br>
</div>
</div>
<div id="custom-demo">
Expand Down
Loading

0 comments on commit 609bb2f

Please sign in to comment.