Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
  <html>
    <head>
<meta name="description" content="horizontal tab" />
      <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
​
      <script type="text/javascript">
        
        $(function() {
          $("#example-one").organicTabs();
        });
​
      </script>
    </head>    
​
    <body>
      <div id="page-wrap">
        <div id="example-one">
          <ul class="nav">
            <li class="nav-one"><a href="#featured" class="current">Featured</a></li>
            <li class="nav-two"><a href="#core">Core</a></li>
            <li class="nav-three"><a href="#jquerytuts">jQuery</a></li>
            <li class="nav-four last"><a href="#classics">Classics</a></li>
          </ul>
​
          <div class="list-wrap">
            <ul id="featured">
              <h4>
                sssssssssssssssssssssssssssssssssssssssssssssd
                sssssssssssssssssssssssssssssssssssssssssssssd
                sssssssssssssssssssssssssssssssssssssssssssssd
                sssssssssssssssssssssssssssssssssssssssssssssd
              <h4>
            </ul>
​
            <ul id="core" class="hide">
              <h4>
                rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
                rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
                rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
                rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
                rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
              <h4>
            </ul>
​
            <ul id="jquerytuts" class="hide">
              <h4>
                yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
                yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
                yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
                yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
                yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
              <h4>
            </ul>
​
            <ul id="classics" class="hide">
              <h4>
                uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
                uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
                uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
                uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
                uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
                uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
              <h4>
            </ul>
​
          </div> <!-- END List Wrap -->
​
        </div> <!-- END Organic Tabs (Example One) -->
      </div>
    </body>
  </html>
 
.list-wrap {
    clear: none;
    margin: 0 0 0 124px;
    padding: 0;
    position: relative;
}
​
#example-one .nav {
    clear: left;
    margin: 0 0 10px;
    overflow: hidden;
    position: absolute;
}
 
(function($) {
​
    $.organicTabs = function(el, options) {
    
        var base = this;
        base.$el = $(el);
        base.$nav = base.$el.find(".nav");
                
        base.init = function() {
        
            base.options = $.extend({},$.organicTabs.defaultOptions, options);
            
            // Accessible hiding fix
            $(".hide").css({
                "position": "relative",
                "top": 0,
                "left": 0,
                "display": "none"
            }); 
            
            base.$nav.delegate("li > a", "click", function() {
            
                // Figure out current list via CSS class
                var curList = base.$el.find("a.current").attr("href").substring(1),
                
                // List moving to
                    $newList = $(this),
                    
                // Figure out ID of new list
                    listID = $newList.attr("href").substring(1),
                
                // Set outer wrapper height to (static) height of current inner list
                    $allListWrap = base.$el.find(".list-wrap"),
                    curListHeight = $allListWrap.height();
                $allListWrap.height(curListHeight);
                                        
                if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {
                                            
                    // Fade out current list
                    base.$el.find("#"+curList).fadeOut(base.options.speed, function() {
                        
                        // Fade in new list on callback
                        base.$el.find("#"+listID).fadeIn(base.options.speed);
                        
                        // Adjust outer wrapper to fit new list snuggly
                        var newHeight = base.$el.find("#"+listID).height();
                        $allListWrap.animate({
                            height: newHeight
                        });
                        
                        // Remove highlighting - Add to just-clicked tab
                        base.$el.find(".nav li a").removeClass("current");
                        $newList.addClass("current");
                            
                    });
                    
                }   
                
                // Don't behave like a regular link
                // Stop propegation and bubbling
                return false;
            });
            
        };
        base.init();
    };
    
    $.organicTabs.defaultOptions = {
        "speed": 300
    };
    
    $.fn.organicTabs = function(options) {
        return this.each(function() {
            (new $.organicTabs(this, options));
        });
    };
    
})(jQuery);
​
$(function() {
    
            $("#example-one").organicTabs();
     
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
aurigadlpro
0viewers