Last active
August 29, 2015 14:02
-
-
Save argshook/3741e093147a3fa65bbb to your computer and use it in GitHub Desktop.
This is a relatively small tabbed content boilerplate (no styling, no bullshit). IE8+. See example here: http://jsbin.com/mejim/2/edit?output
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> | |
| <head> | |
| <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div class="tabbed"> | |
| <ul class="tabs"> | |
| <li data-tab="1">tab #1</li> | |
| <li data-tab="2">tab #2</li> | |
| <li data-tab="3">tab #3</li> | |
| <li data-tab="4">tab #4</li> | |
| </ul> | |
| <div class="content"> | |
| <div class="item" data-open="true" data-item="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quo saepe qui sapiente ullam quis est repellendus ad repudiandae animi.</div> | |
| <div class="item" data-item="2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione debitis et rem esse voluptatum quo aperiam tenetur deleniti maiores optio consequatur laboriosam veniam maxime. Aliquam!</div> | |
| <div class="item" data-item="3">Lorem ipsum dolor sit amet.</div> | |
| </div> | |
| </div> | |
| <hr> | |
| <div class="tabbed"> | |
| <ul class="tabs"> | |
| <li data-tab="1">first</li> | |
| <li data-tab="2">second</li> | |
| <li data-tab="3">third</li> | |
| <li data-tab="4">forth</li> | |
| <li data-tab="5">no content</li> | |
| </ul> | |
| <div class="content"> | |
| <div class="item" data-open="true" data-item="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quo saepe qui sapiente ullam quis est repellendus ad repudiandae animi.</div> | |
| <div class="item" data-item="2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione debitis et rem esse voluptatum quo aperiam tenetur deleniti maiores optio consequatur laboriosam veniam maxime. Aliquam!</div> | |
| <div class="item" data-item="3">Lorem ipsum dolor sit amet.</div> | |
| <div class="item" data-item="4">Lorem ipsum dolor sit ameaskldjalkst.</div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
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
| var options = { | |
| selector: '.tabbed' | |
| }; | |
| (function(options) { | |
| var $containers = $(options.selector); | |
| $containers.each(function() { | |
| var | |
| $container = $(this), | |
| $tabs = $container.find('.tabs').attr('data-instance', new Date().getTime()), // adding data-instance for events to work correctly when multiple instances of this tabbed thingy are issued. | |
| $contentItems = $container.find('.content'); | |
| $tabs.on('click', function(event) { | |
| // simple event delegation | |
| if(event.target.nodeName === 'LI') { | |
| var tabId = $(event.target).attr('data-tab'); | |
| // close all previously opened tabs | |
| $tabs | |
| .find('[data-open=true]') | |
| .attr('data-open', 'false'); | |
| // open clicked tab | |
| $tabs | |
| .find('[data-tab='+tabId+']') | |
| .attr('data-open', 'true'); | |
| // hide previously open tab content | |
| $contentItems | |
| .find('.item') | |
| .attr('data-open', 'false'); | |
| // open current tab content | |
| $contentItems | |
| .find('[data-item=' + tabId + ']') | |
| .attr('data-open', 'true'); | |
| } | |
| }); | |
| }); | |
| })(options); |
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
| * {box-sizing: border-box;} | |
| .tabbed { | |
| .tabs { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| li { | |
| display: inline-block; | |
| cursor: pointer; | |
| &:first-child { border-left: none; } | |
| &[data-open="true"], | |
| &:hover { | |
| // | |
| } | |
| &:active { | |
| // | |
| } | |
| } | |
| } | |
| .content { | |
| padding: 0.2em; | |
| .item, | |
| .item[data-open="false"] { | |
| display: none; | |
| } | |
| .item[data-open="true"] { | |
| display: block !important; | |
| } | |
| } | |
| } |
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
| var options = { | |
| selector: '.tabbed' | |
| }; | |
| (function(e){var t=$(e.selector);t.each(function(){var e=$(this),t=e.find(".tabs").attr("data-instance",(new Date).getTime()),n=e.find(".content");t.on("click",function(e){if(e.target.nodeName==="LI"){var r=$(e.target).attr("data-tab");t.find("[data-open=true]").attr("data-open","false");t.find("[data-tab="+r+"]").attr("data-open","true");n.find(".item").attr("data-open","false");n.find("[data-item="+r+"]").attr("data-open","true")}})})})(options) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is a relatively small tabbed content boilerplate. Any improvements are welcome!