Created
November 14, 2012 11:23
-
-
Save henrahmagix/4071622 to your computer and use it in GitHub Desktop.
Quickly apply 'read more' jump links to full content
This file contains 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
| body { | |
| background-color: #B9B79E; | |
| color: #2C241D; | |
| font-family: "PT Sans", Arial; | |
| font-size: 12px; | |
| font-weight: normal; | |
| } | |
| code { | |
| background-color: #EDEDE7; | |
| color: #2C241D; | |
| padding: 0 1em; | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration: inherit; | |
| } | |
| .read-more, .button { | |
| background-color: #EDEDE7; | |
| color: #593723; | |
| cursor: pointer; | |
| text-decoration: none; | |
| } | |
| .read-more:hover, .read-more:focus { | |
| background-color: #2C241D; | |
| color: #EDEDE7; | |
| } | |
| .read-more { | |
| display: inline-block; | |
| padding: 0.5em 1.5em; | |
| } | |
| .button { | |
| border: 1px solid #593723; | |
| -moz-box-shadow: 0 6px 0 0 #593723; | |
| -webkit-box-shadow: 0 6px 0 0 #593723; | |
| box-shadow: 0 6px 0 0 #593723; | |
| display: block; | |
| font-size: 16px; | |
| line-height: 16px; | |
| margin: 0 auto 15px; | |
| padding: 10px; | |
| position: relative; | |
| top: 0; | |
| width: 100px; | |
| } | |
| .button:hover, .button:focus { | |
| -moz-box-shadow: 0 2px 0 0 #593723; | |
| -webkit-box-shadow: 0 2px 0 0 #593723; | |
| box-shadow: 0 2px 0 0 #593723; | |
| top: 4px; | |
| } | |
| .button:active { | |
| -moz-box-shadow: inset 0 2px 2px 1px #593723; | |
| -webkit-box-shadow: inset 0 2px 2px 1px #593723; | |
| box-shadow: inset 0 2px 2px 1px #593723; | |
| top: 6px; | |
| } | |
| .button:before { | |
| content: ''; | |
| background-color: transparent; | |
| border: 0 solid transparent; | |
| display: block; | |
| position: absolute; | |
| bottom: 100%; | |
| left: 0; | |
| height: 0; | |
| width: 101%; | |
| } | |
| .button:hover:before, .button:focus:before, .button:active:before { | |
| border-left-width: 1px; | |
| left: -1px; | |
| } | |
| .button:hover:before, .button:focus:before { | |
| height: 5px; | |
| } | |
| .button:active:before { | |
| height: 7px; | |
| } | |
| .title, .subtitle, .button { | |
| font-family: "Arvo"; | |
| text-align: center; | |
| } | |
| article { | |
| background-color: #593723; | |
| border: 2px solid #EDEDE7; | |
| -moz-box-shadow: 8px 8px 4px 2px rgba(0, 0, 0, 0.3); | |
| -webkit-box-shadow: 8px 8px 4px 2px rgba(0, 0, 0, 0.3); | |
| box-shadow: 8px 8px 4px 2px rgba(0, 0, 0, 0.3); | |
| color: #EDEDE7; | |
| margin: 10px 0; | |
| padding: 2%; | |
| text-align: justify; | |
| width: 38%; | |
| } | |
| .left { | |
| float: left; | |
| margin-left: 5%; | |
| } | |
| .right { | |
| float: right; | |
| margin-right: 5%; | |
| } |
This file contains 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
| <html> | |
| <head> | |
| <title>Quick Jump Link</title> | |
| <link href="http://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" type="text/css"> | |
| <link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css"> | |
| <link rel="stylesheet" type="text/css" href="index.css"> | |
| <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> | |
| <script type="text/javascript" src="quick-jump-link.js"></script> | |
| </head> | |
| <body> | |
| <h1 class="title">Quick Jump Link</h1> | |
| <h2 class="subtitle">A jQuery function to provide toggling of large content</h2> | |
| <a class="button go" href="#">Go</a> | |
| <section> | |
| <article class="left"> | |
| <p>This uses <code>jQuery().nextAll()</code> to select all next siblings of the toggle buttons.</p> | |
| <p class="read-more"><a href="#">Read less...</a></p> | |
| <p>Nulla rhoncus nisi eget eros consequat volutpat. Ut molestie elementum imperdiet. Donec rutrum, odio imperdiet lacinia lacinia, tellus sapien porttitor velit, vitae adipiscing enim ipsum nec urna. Nullam sed neque dui, vitae posuere enim. Nam mollis lorem non arcu volutpat nec adipiscing lorem ultrices. Sed eget erat quis lacus bibendum blandit. Phasellus consequat est sed orci facilisis at volutpat velit feugiat. Ut pulvinar magna quis tortor lacinia elementum. Fusce bibendum dolor ac ligula dignissim tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus non odio nibh. Proin vel lectus sit amet sem varius varius. Morbi ac ante a urna lacinia volutpat. Quisque eget erat in libero pulvinar tincidunt et eget sapien. Curabitur semper vestibulum ante, non sagittis neque faucibus a.</p> | |
| <p>Donec nec ante nisl, in tristique est. Nulla dolor augue, consequat vel mollis nec, fermentum ac enim. Maecenas in neque eu orci vehicula varius vitae quis justo. Mauris eget mattis diam. Vivamus consectetur ligula in lectus cursus mollis. Suspendisse sed nulla et sapien suscipit luctus nec eget augue. Aliquam erat volutpat. Aenean lorem ante, cursus vestibulum sollicitudin non, consectetur et purus.</p> | |
| <p>Fusce tincidunt augue sed quam vehicula ac laoreet nulla auctor. Etiam posuere, massa a tincidunt aliquet, elit ligula fringilla est, eu egestas magna leo eget nisl. Sed tristique adipiscing commodo. Pellentesque quis ligula metus. Mauris hendrerit risus at felis pharetra sit amet pharetra erat ultrices. Ut elit est, ultrices at hendrerit facilisis, vulputate non leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In lacus augue, molestie a elementum vitae, feugiat vitae libero. Curabitur gravida nisi ut orci porttitor ullamcorper non ut diam. Nulla posuere porta sapien eget vestibulum. Duis vitae odio id diam rutrum sollicitudin. Ut aliquet, odio quis blandit gravida, nisi ipsum vestibulum massa, quis egestas neque tortor eget urna.</p> | |
| <p>Etiam fringilla nunc sit amet purus dapibus eget auctor ligula rhoncus. Nullam venenatis molestie sem, eget vestibulum ante blandit ut. Duis ut enim non nisi pulvinar ornare ac eget arcu. In a sagittis arcu. Fusce felis sem, luctus hendrerit ultricies id, tempus quis nibh. Morbi sed erat arcu, in lacinia ipsum. Fusce congue, leo non lacinia posuere, nunc arcu luctus sapien, sit amet vulputate nisl tellus sit amet quam. Vestibulum vel purus porta odio luctus ornare vel non risus. Maecenas eget neque lectus. Integer quis odio ac erat aliquet accumsan vitae sed erat. Duis sed ligula est.</p> | |
| </article> | |
| <article class="right"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae risus lorem. Donec placerat magna et sapien vestibulum tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam at viverra orci. Ut urna quam, suscipit in euismod ac, interdum eu arcu. Pellentesque elementum metus et justo blandit pharetra. Curabitur scelerisque eleifend sapien, pulvinar aliquam justo cursus in.</p> | |
| <a href="#" class="read-more">Read less...</a> | |
| <p>Nulla rhoncus nisi eget eros consequat volutpat. Ut molestie elementum imperdiet. Donec rutrum, odio imperdiet lacinia lacinia, tellus sapien porttitor velit, vitae adipiscing enim ipsum nec urna. Nullam sed neque dui, vitae posuere enim. Nam mollis lorem non arcu volutpat nec adipiscing lorem ultrices. Sed eget erat quis lacus bibendum blandit. Phasellus consequat est sed orci facilisis at volutpat velit feugiat. Ut pulvinar magna quis tortor lacinia elementum. Fusce bibendum dolor ac ligula dignissim tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus non odio nibh. Proin vel lectus sit amet sem varius varius. Morbi ac ante a urna lacinia volutpat. Quisque eget erat in libero pulvinar tincidunt et eget sapien. Curabitur semper vestibulum ante, non sagittis neque faucibus a.</p> | |
| <p>Donec nec ante nisl, in tristique est. Nulla dolor augue, consequat vel mollis nec, fermentum ac enim. Maecenas in neque eu orci vehicula varius vitae quis justo. Mauris eget mattis diam. Vivamus consectetur ligula in lectus cursus mollis. Suspendisse sed nulla et sapien suscipit luctus nec eget augue. Aliquam erat volutpat. Aenean lorem ante, cursus vestibulum sollicitudin non, consectetur et purus.</p> | |
| <p>Fusce tincidunt augue sed quam vehicula ac laoreet nulla auctor. Etiam posuere, massa a tincidunt aliquet, elit ligula fringilla est, eu egestas magna leo eget nisl. Sed tristique adipiscing commodo. Pellentesque quis ligula metus. Mauris hendrerit risus at felis pharetra sit amet pharetra erat ultrices. Ut elit est, ultrices at hendrerit facilisis, vulputate non leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In lacus augue, molestie a elementum vitae, feugiat vitae libero. Curabitur gravida nisi ut orci porttitor ullamcorper non ut diam. Nulla posuere porta sapien eget vestibulum. Duis vitae odio id diam rutrum sollicitudin. Ut aliquet, odio quis blandit gravida, nisi ipsum vestibulum massa, quis egestas neque tortor eget urna.</p> | |
| <p>Etiam fringilla nunc sit amet purus dapibus eget auctor ligula rhoncus. Nullam venenatis molestie sem, eget vestibulum ante blandit ut. Duis ut enim non nisi pulvinar ornare ac eget arcu. In a sagittis arcu. Fusce felis sem, luctus hendrerit ultricies id, tempus quis nibh. Morbi sed erat arcu, in lacinia ipsum. Fusce congue, leo non lacinia posuere, nunc arcu luctus sapien, sit amet vulputate nisl tellus sit amet quam. Vestibulum vel purus porta odio luctus ornare vel non risus. Maecenas eget neque lectus. Integer quis odio ac erat aliquet accumsan vitae sed erat. Duis sed ligula est.</p> | |
| </article> | |
| </section> | |
| </body> | |
| </html> |
This file contains 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
| // Insert the following at the point you want to hide content. | |
| // <p class="read-more">Read more...</p> | |
| (function($) { | |
| $(function() { | |
| var go = $('.go'); | |
| var goOnce = true; | |
| go.click(function(e) { | |
| e.preventDefault(); | |
| if (goOnce) { | |
| // Wrap the content and hide it. | |
| $('.read-more').each(function() { | |
| var toggle = $(this); | |
| toggle.addClass('less') | |
| .nextAll() | |
| .wrapAll('<div class="content-more" />'); | |
| // Slide the content and change the text to reflect it. | |
| toggle.click(function(e) { | |
| e.preventDefault(); | |
| toggle = $(this); | |
| toggle.siblings('.content-more').slideToggle(); | |
| if (toggle.hasClass('less')) { | |
| toggle.removeClass('less') | |
| .addClass('more') | |
| .text('Read more...'); | |
| } | |
| else { | |
| toggle.removeClass('more') | |
| .addClass('less') | |
| .text('Read less...'); | |
| } | |
| }); | |
| toggle.click(); | |
| }); | |
| } | |
| goOnce = false; | |
| }); | |
| }); | |
| })(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Interesting