[Code]Things related to Organic Tabs

Example:


What do you call to this one, where you click/hover a tab and the rest (excluding the tabs) changes?
I dunno what to explain.
And oh... can you help me what codes to be use?

Hello , where you saw that , and is a jQuery
Post here the url of forum where you saw that.

I just found it as an artwork... but I feel it is possible... I just don't know the name is...

The HTML :

Code:

<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>
    </ul>
 
    <div class="list-wrap">
 
      <ul id="featured">
        <li>Stuff in here!</li>
      </ul>
     
      <ul id="core" class="hide">
        <li>Stuff in here!</li>
      </ul>
     
     
    </div> <!-- END List Wrap -->
 
 </div>

And after this , add that code :

Code:

<style>#example-one { background: #eee; padding: 10px; margin: 0 0 15px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; }

#example-one .nav { overflow: hidden; margin: 0 0 10px 0; }
#example-one .nav li { width: 97px; float: left; margin: 0 10px 0 0; }
#example-one .nav li.last { margin-right: 0; }
#example-one .nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: 10px; text-align: center; border: 0; }
#example-one .nav li a:hover { background-color: #111; }

#example-one ul { list-style: none; }
#example-one ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
#example-one ul li a:hover, #example-one ul li a:focus { background: #fe4902; color: white; }
#example-one ul li:last-child a { border: none; }

#example-one li.nav-one a.current, ul.featured li a:hover { background-color: #0575f4; color: white; }
#example-one li.nav-two a.current, ul.core li a:hover { background-color: #d30000; color: white; }</style>

<script>
(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();
       
        $("#example-two").organicTabs({
            "speed": 200
        });

    });
</script>

Their name are "Organic Tabs" and I've done a simple example with them : http://fmsoftware.quickbb.com/t27-organic-tabs
Now , you need to make some styles edit and it is done.

Please change the title of your topic, that is related to your question/issue, so that other users will be able to find their question/issue using the search engine.

@SLGray... It's kinda hard calling something you don't know.

cHaSwWind04 wrote:@SLGray... It's kinda hard calling something you don't know.

candy_fear mentioned above what the type of code is called.

candy_fear wrote:Their name are "Organic Tabs" and I've done a simple example with them : http://fmsoftware.quickbb.com/t27-organic-tabs
Now , you need to make some styles edit and it is done.