SO - 18668320

by DannyEnglander

HTML

<aside id="0" class="widget tabbed popular-articles">
    <header>
        <h1 class="widget-title">Popular Articles 1</h1>
        <a href="#" class="more">More</a>
        
        <ul class="tab-nav">
            <li class="active"><a href="#tab1">Read</a></li>
            <li><a href="#tab2">Emailed</a></li>
        </ul>
    </header>
    
    <div class="content">
        <div id="tab1" class="tab read first active">
            <ol>
                <li>
                    <a href="#">The IT Talent Problem</a>
                </li>
                <li>
                    <a href="#">Finance Leaders Bemoan Talent Shortage</a>
                </li>
                <li>
                    <a href="#">A Powerful Stock-Price Predictor</a>
                </li>
                <li>
                    <a href="#">The Great Pension Derisking</a>
                </li>
                <li>
                    <a href="#">It's All in the Game</a>
                </li>
            </ol>
        </div>
        <div id="tab2" class="tab emailed second">
            <ol>
                <li>
                    <a href="#">Special Report: Benchmarking Tech</a>
                </li>
                <li>
                    <a href="#">The IT Talent Problem</a>
                </li>
                <li>
                    <a href="#">The Great Pension Derisking</a>
                </li>
                <li>
                    <a href="#">A Powerful Stock-Price Predictor</a>
                </li>
                <li>
                    <a href="#">It's All in the Game</a>
                </li>
            </ol>
        </div>
    </div>
</aside>
<aside id="1" class="widget tabbed popular-articles">
    <header>
        <h1 class="widget-title">Popular Articles 2</h1>
        <a href="#" class="more">More</a>
        
        <ul class="tab-nav">
            <li class="active"><a href="#tab1b">Read</a></li>
            <li><a href="#tab2b">Emailed</a></li>
       ...

SCSS

.widget{
	margin-bottom: 1em;
	padding: 1px;
	overflow: hidden;
	header{

		.more{
			float: right;
			font-size: 0.8em;

			text-transform: lowercase;
			&:hover{

			}
		}
	}
		.widget-title{
			font-size: 1em;
			font-weight: bold;
			float: left;
			//text-transform: uppercase;
		}
	h1, h2, h3{
		clear: none;
	}
	a, a:visited{

		text-decoration: none;
	}
	ul, ol{
		margin: 0;
		padding: 0;
	}
	p{
		font-size: 0.8em;
		margin-top: 0.5em;
		line-height: 1.4;
	}


	.content{
		padding: 0.75em;
	} /* END .widget general styles */

	&.tabbed{

		header{
			background-color: #eee;


			padding: 0.5em 0.5em 0;
		}
		.widget-title{
			color: $red;
		}
		.tab-nav{
			clear: both;
           list-style: none;
                overflow: hidden;
			li{
				float: left;
				a{

					font-size: 0.8em;
					font-weight: bold;
					padding: 5px 10px;
					border-style: solid;
					border-width: 1px 1px 0;
					border-color: transparent;
				}
				&.active{
					a{
						background-color: #fff;

					}
				}
			}
		}
		.content{

			.tab{
				display: none;
				&.active{
					display: block;
				}
			}
			ol{
				list-style: none;
				counter-reset: li;
				li{
					position: relative;
					padding-left: 30px;
					margin: 3px 0;
					font-size: 0.8em;
					&:before{
						content: counter(li);
						counter-increment: li;
						position: absolute;
						left: 0;
						top: 0;
						width: 20px;
						height: 20px;
						line-height: 20px;
						color: #fff;


						text-align: center;
					}
				}
			}
		}
	} /* END .widget.tabbed */
}
}

JavaScript

$('.tab-nav li a').click(function(){
		
		var currentTab = $(this).attr('href');
		var tabs = $(this).parents('aside');

		$(this).parent('li').siblings().removeClass('active');
		$(this).parent('li').addClass('active');
		tabs.find('.tab').removeClass('active');
		$(currentTab).addClass('active');

		return false;

	});