<html>
<head>
<style>
#example-one {
width:318px;
height:500px;
background: #eee;
margin: 400px -320px 15px 0;
float:right;
}
#example-one .nav {
overflow: hidden;
margin: 10px 0 10px 10px;
}
#example-one .nav li {
width: 150px;
float:left;
margin: 0 0 0 0;
}
#example-one .nav li.last {
margin-right: 0;
}
#example-one .nav li a {
display: block;
padding: 10px;
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;
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:#0C6;
color: white;
}
#example-one li.nav-two a.current, ul.core li a:hover {
background-color: #d30000;
color: white;
}
.img-box {
width:89px;
height:89px;
margin:10px 10px;
float:left;
padding-left:-5px;
}
.img-box img {
width:89px;
height:89px;
float:left;
}
.text-slider {
margin:-70px 10px;
font-size:11px;
float:right;
}
#featured a {
text-decoration:none;
font-size:13px;
color:#7b7c7c;
float:left;
}
.text-slider a:hover {
color:#54d5d5;
}
#featured{
display:block;
overflow:hidden
background-color:#ddd;
margin-bottom:2px;
}
#core{
display:block;
overflow:hidden
background-color:#ddd;
margin-bottom:5px;
float:left;
}
#core a {
text-decoration:none;
font-size:13px;
color:#7b7c7c;
float:left;
}
.img-boxs{
width:50px;
height:50px;
float:left;
padding-left:10px;
}
.img-boxs img{
width:50px;
height:50px;
float:left;
}
.text-sliders{
margin:15px 10px;
font-size:11px;
float:right;
}
</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>
</head>
<body>
<div id="example-one">
<ul class="nav">
<li class="nav-one"><a href="#featured" class="current">LATEST</a></li>
<li class="nav-two"><a href="#core">COMMENTED</a></li>
</ul>
<div class="list-wrap">
<ul id="featured">
<li>
<div class="img-box">
<img src="<?php bloginfo('template_url'); ?>/image/1.png" />
</div>
<div class="text-slider"> <a href="#">Permalink to Post With Featured</a>
<br/>2014 17 June</div>
</li>
<li>
<div class="img-box">
<img src="<?php bloginfo('template_url'); ?>/image/1.png" />
</div>
<div class="text-slider"> <a href="#">Permalink to Post With Featured</a>
<br/>2014 17 June</div>
</li>
<li>
<div class="img-box">
<img src="<?php bloginfo('template_url'); ?>/image/1.png" />
</div>
<div class="text-slider"> <a href="#">Permalink to Post With Featured</a>
<br/>2014 17 June</div>
</li>
<li>
<div class="img-box">
<img src="<?php bloginfo('template_url'); ?>/image/1.png" />
</div>
<div class="text-slider"> <a href="#">Permalink to Post With Featured</a>
<br/>2014 17 June</div>
</li>
</div>
<ul id="core" class="hide">
<li>
<div class="img-boxs">
<img src="<?php bloginfo('template_url'); ?>/image/a.png" />
</div>
<div class="text-sliders">
<a href="#">Permalink to Post With Featured</a>
</div>
</li>
<li>
<div class="img-boxs">
<img src="<?php bloginfo('template_url'); ?>/image/a.png" />
</div>
<div class="text-sliders">
<a href="#">Permalink to Post With Featured</a>
</div>
</li>
<li>
<div class="img-boxs">
<img src="<?php bloginfo('template_url'); ?>/image/a.png" />
</div>
<div class="text-sliders">
<a href="#">Permalink to Post With Featured</a>
</div>
</li>
<li>
<div class="img-boxs">
<img src="<?php bloginfo('template_url'); ?>/image/a.png" />
</div>
<div class="text-sliders">
<a href="#">Permalink to Post With Featured</a>
</div>
</li>
<li>
<div class="img-boxs">
<img src="<?php bloginfo('template_url'); ?>/image/a.png" />
</div>
<div class="text-sliders">
<a href="#">Permalink to Post With Featured</a>
</div>
</li>
<li>
<div class="img-boxs">
<img src="<?php bloginfo('template_url'); ?>/image/a.png" />
</div>
<div class="text-sliders">
<a href="#">Permalink to Post With Featured</a>
</div>
</li>
</ul>
</div>
</body>
</html>
