You've seen this nifty tabs widget on most websites powered by Wordpress. Today we're going to create one of our own and use it on your favorite portal. Instead of using links and text, i decided to use the Facebook Like box and Twitter's widget. First off, a couple of things are needed:

1.  https://developers.facebook.com/docs/plugins/page-plugin
2.  https://developer.twitter.com/en/docs/twitter-for-websites/timelines/overview.html
3.  Create an HTML side block.
4. Make sure when creating such feeds, the width is 350px  height: 265px

view demo

The markup:

Code Select Expand


<div class="wrap">

  <div class="tabs group">
    <li><a class="one switch activeTa" href="#">Facebook</a></li>
    <li><a class="two switch" href="#">Twitter</a></li>
  </div>

<div class="container">
  <div id="one">facebook-iframe-code-goes-here</div>

  <div id="two">twitter-code-goes-here</div>
</div>

</div>


The CSS: (Change widths, heights and colors to suit your needs)

Code Select Expand


.wrap {
  marin: 0 auto;
}
.tabs {
  width: 350px;
height: 80px;
margin: 0 auto;
list-style: none;
overflow: hidden;
  padding: 0;
}
.tabs li {
float: left;
width: 175px;
}
.tabs li a {
position: relative;
display: block;
height: 30px;
margin-top: 40px;
padding: 10px 0 0 0;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
text-align: center;
text-decoration: none;
color: #ffffff;
background: #72c1ae;
-webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
   -moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
        box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
        border: 0px solid #000000;
-webkit-transition: padding 0.2s ease, margin 0.2s ease;
       -moz-transition: padding 0.2s ease, margin 0.2s ease;
         -o-transition: padding 0.2s ease, margin 0.2s ease;
        -ms-transition: padding 0.2s ease, margin 0.2s ease;
            transition: padding 0.2s ease, margin 0.2s ease;
}
.tabs li:first-child a {
z-index: 3;
  -webkit-border-top-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
  border-top-left-radius: 8px;
}
.tabs li:nth-child(2) a {
z-index: 2;
}
.tabs li:last-child a {
z-index: 1;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
   -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
        box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-top-right-radius: 8px;
    -moz-border-radius-topright: 8px;
  border-top-right-radius: 8px;
}
.tabs li a:hover {
margin: 35px 0 0 0;
padding: 10px 0 5px 0;
}
.tabs li a.activeTa {
margin: 30px 0 0 0;
padding: 10px 0 10px 0;
background: #f1f1f1;
color: #72c1ae;
z-index: 4;
outline: none;
}
.group:before,
.group:after {
  content: " ";
  display: table;
}
.group:after {
  clear: both;
}
.container {
  width: 350px;
  height: 265px;
  margin: 0 auto;
  overflow: hidden;
  background: #f1f1f1;
    -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
       -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
            box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-bottomleft: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

#one {
margin: 0;
padding: 0 0 0 10px;
}

#two {
margin: 0;
padding: 0 0 0 10px;
}


The JS:

Code Select Expand


<script type="text/javascript" src="[url]http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$('.one').click(function() {
    $('a.switch').removeClass("activeTa");
    $(this).addClass("activeTa");
      $("#one").show();
      $("#two").hide();
 
});
 
$('.two').click(function() {
    $('a.switch').removeClass("activeTa");
    $(this).addClass("activeTa");
      $("#one").hide();
      $("#two").show()
 
});
</script>


See the Pen Light & Sexy Tabs by Mick (@Mick-) on CodePen.

Updated to latest Facebook and Twitter scripts.