Created
March 30, 2010 22:17
-
-
Save jonahlyn/349659 to your computer and use it in GitHub Desktop.
simpleSlider jQuery plugin. http://jsbin.com/gist/349659
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title>Simple Slider Plugin</title> | |
| <style type="text/css"> | |
| ul.simple-slider { | |
| padding: 0.5em 0; | |
| margin: 0; | |
| } | |
| ul.simple-slider li{ | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0 0 1em 1em; | |
| } | |
| ul.simple-slider li.active{ | |
| } | |
| ul.simple-slider li div{ | |
| margin: 0; | |
| padding: 0; | |
| } | |
| ul.simple-slider h4{ | |
| font-size: 1em; | |
| font-weight: bold; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| ul.simple-slider p { | |
| margin: 0 0 1em 0; | |
| padding: 1em 0 0; | |
| } | |
| ul.simple-slider a.readmore{ | |
| margin: 0; | |
| padding: 0; | |
| } | |
| </style> | |
| <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> | |
| <script src="http://gist.github.com/raw/349659/add4f222605926be10868882da566598644ca832/simpleSlider.jQuery.js"></script> | |
| <script> | |
| $(function(){ | |
| $('ul.simple-slider').simpleSlider(); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <ul class="simple-slider"> | |
| <li> | |
| <h4>A Headline</h4> | |
| <div> | |
| <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. | |
| </p> | |
| </div> | |
| </li> | |
| <li> | |
| <h4>Another Headline</h4> | |
| <div> | |
| <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. | |
| </p> | |
| </div> | |
| </li> | |
| </ul> | |
| </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
| /* Plug-in: simpleSlider | |
| * A simple plug-in to slide content into view. | |
| * | |
| * Example: | |
| * $('ul.simple-slider').simpleSlider(); | |
| * | |
| * Depends on this HTML structure: | |
| * <ul class="simple-slider"> | |
| * <li> | |
| * <h4>A Headline</h4> | |
| * <div>Content</div> | |
| * </li> | |
| * </ul> | |
| */ | |
| (function($){ | |
| $.fn.simpleSlider = function(){ | |
| var element = this; | |
| /* Hide the Details */ | |
| $("div",element).each(function(){ | |
| $(this).css("height",$(this).height()+"px"); | |
| $(this).hide(); | |
| }); | |
| /* Make the headline click-able */ | |
| $("li h4",element).wrapInner("<a class='readmore' href='#'></a>"); | |
| /* On click, slide the message details in or out of view. | |
| * change the 'Read More' link to 'Read Less' | |
| */ | |
| $("a.readmore",element).click(function(l){ | |
| $(this).parents("li").toggleClass('active').children("div").slideToggle(); | |
| return false; | |
| }); | |
| return this; | |
| }; | |
| })(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment