Last active
December 16, 2015 13:38
-
-
Save kaelig/5442791 to your computer and use it in GitHub Desktop.
Expose/hide content à la Facebook.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ========================================================================== | |
| Text exposed utility | |
| ========================================================================== */ | |
| /** | |
| * Hides/shows text (use case: "read more" link) | |
| * | |
| * When `u-textExposed` has class `u-textExposed--expose`: | |
| * Shows `u-textExposed-show` | |
| * Hides `u-textExposed-hide` | |
| */ | |
| .u-textExposed { | |
| display: inline; | |
| } | |
| .u-textExposed-hide {} | |
| .u-textExposed-show { | |
| display: none; | |
| } | |
| .no-js .u-textExposed-hide, | |
| .u-textExposed--expose .u-textExposed-hide { | |
| display: none; | |
| } | |
| .no-js .u-textExposed-show, | |
| .u-textExposed--expose .u-textExposed-show { | |
| display: inline; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="u-textExposed" id="lksajdflkshdflhdf1"> | |
| This text will always be visible<!-- | |
| --><span class="u-textExposed-hide">… <a href="#lksajdflkshdflhdf1" class="js-textExposed-action">Read more</a></span><!-- | |
| --><span class="u-textExposed-show">This is hidden</span> | |
| </div> | |
| <div class="u-textExposed u-textExposed--expose" id="lksajdflkshdflhdf2"> | |
| This text will always be visible<!-- | |
| --><span class="u-textExposed-hide">… <a href="#lksajdflkshdflhdf2" class="js-textExposed-action">Read more</a><!-- Hidden --></span><!-- | |
| --><span class="u-textExposed-show">This text is visible</span> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en" class="no-js"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Text Exposed Test</title> | |
| <link rel="stylesheet" href="textexposed.css" /> | |
| <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script> | |
| </head> | |
| <body> | |
| <div class="u-textExposed" id="lksajdflkshdflhdf1"> | |
| This text will always be visible<!-- | |
| --><span class="u-textExposed-hide">… <a href="#lksajdflkshdflhdf1" class="js-textExposed-action">Read more</a></span><!-- | |
| --><span class="u-textExposed-show">This will be shown on click on the "Read more" link above.</span> | |
| </div> | |
| <hr /> | |
| <div class="u-textExposed u-textExposed--expose" id="lksajdflkshdflhdf2"> | |
| This text will always be visible<!-- | |
| --><span class="u-textExposed-hide">… <a href="#lksajdflkshdflhdf2" class="js-textExposed-action">Read more</a><!-- Hidden --></span><!-- | |
| --><span class="u-textExposed-show">This text is already visible because <code>u-textExposed</code> has the <code>u-textExposed--expose</code> class.</span> | |
| </div> | |
| <script> | |
| (function(){ | |
| 'use strict'; | |
| var exposeActions = document.querySelectorAll(".js-textExposed-action"), | |
| exposedRootSelector, | |
| expose; | |
| expose = function(e) { | |
| e.preventDefault(); | |
| exposedRootSelector = e.target.getAttribute("href"); | |
| document.querySelector(exposedRootSelector).classList.add("u-textExposed--expose"); | |
| }; | |
| for (var i = exposeActions.length - 1; i >= 0; i--) { | |
| exposeActions[i].addEventListener("click", expose, false); | |
| } | |
| }()); | |
| </script> | |
| </body> | |
| </html> |
Author
Thanks, I actually just added a no-js class to the html element to always show the content when JavaScript is turned off.
Also, being sent to that URL with content shown is a very edge case but for UX reasons I might add it in the product itself (not in here though).
ok
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You should replace this:
With this:
It will allow: