How To Build a Tabbed Ajax Content Widget using jQuery

Blogs are usually full of different posts all with varying degrees of popularity. Readers don’t always know how to find related posts without using the search feature. It helps to build smaller widgets right into the page that can automatically sort through content based on different criteria.

In this tutorial I want to demonstrate how we can build a sidebar-based tabbed ajax widget to display related blog posts. Many times these widgets feature some type of thumbnail image, along with other metadata like the author and publication date. I’ve kept things real simple mostly focusing on the jQuery animations. Take a peek at my live demo to understand what the final outcome should be.

Live Demo – Download Source Code

First I am creating a new blank HTML5 document with a couple related files. The first is a local copy of jQuery and the second is a styles.css stylesheet. This will include some page resets along with the generic layout formatting.

The overall webpage is built to appear like a very simple weblog. The left-hand content uses some filler Ipsum to look like blog posts. While in the sidebar you will find a small widget using 3 top links organizing newest, popular, and random articles.

Newest Popular Random

I really like this design because it is sleek and conforms nicely into any layout. It would not require much effort to extend the design into more colorful examples to fit your own project. We also use a coordinated CSS class of .active to check which tab of content is being displayed at any given time.

Aside from my typical resets I have also included a new Google Webfont named Crete Round for our headings. The div IDs #left and #sidebar are both set to fixed widths floated within a clearfix container. This also means the widget itself has been set to a fixed width. It should be noted that mobile users may not even want to use this widget, and you might consider hiding it beyond a certain device width using media queries.

#w { display: block; margin: 0 auto; width: 800px; padding: 11px 16px; background: #fff; border: 7px solid rgba(0,0,0,0.35); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}#left { display: block; float: left; width: 460px; padding: 0 7px; margin-right: 14px;}#sidebar { display: block; float: left; width: 280px;}

The actual navigation links are centered in their own heading element. If you wanted to use tabs it would require some type of border, or possibly a box shadow surrounding the link. I’ve instead opted to use a simple background effect on hover which sticks to the active link. Also the full tabbed posts widget is fixed at 250px width for the sake of this demo.

/** tabber widget **/#tabbed-posts { display: block; width: 250px; margin: 0 auto; padding-top: 25px;}#tabbed-posts .navlinks { display: block; padding: 14px 0; font-size: 1.4em; text-align: center;}#tabbed-posts .navlinks a { text-decoration: none; font-weight: normal; margin-right: 5px; color: #588bc4; padding: 5px 7px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}#tabbed-posts .navlinks a:hover, #tabbed-posts .navlinks a.active:hover { background: #dde8f4;}#tabbed-posts .navlinks a.active { font-weight: bold; background: #e8f0f9;}

Now this block of code shouldn’t come as any surprise. Everything can be styled nicely if we include floating elements with a clearfix container. The biggest difference comes within each content section of the page. I am using three divs with the class .tabcontent and they each contain an unordered list of links.

.tabcontent ul li { padding-bottom: 5px; padding-top: 7px; border-bottom: 1px solid #cbcbcb;}.tabcontent ul li h3 { font-size: 1.5em; line-height: 1.4em; font-weight: normal;}.tabcontent ul li h3 a { display: block; width: 100%; color: #6a6e7a; padding: 3px 0; font-weight: bold; text-decoration: none; text-shadow: 1px 1px 0 #fff;}.tabcontent ul li h3 a:hover { background: #dde8f4;}.tabcontent ul li h3 .featuredpic { display: block; float: left; margin: 0; margin-right: 3px; padding: 3px 4px;}.tabcontent ul li h3 .featuredpic img { display: block;}

The first div is always displayed on pageload because it focuses on the “newest” posts. As you click between links it’ll auto-hide the main content in order to show the new list. Generally this would require additional classes but I’ve opted to instead write inline CSS styles for display:none. This helps when dealing with jQuery’s fadeIn() and fadeOut() methods that use inline styles anyways.

In any website this widget is basically useless without some JavaScript to handle the dynamic content switching. It isn’t too overly-complicated so anybody with some familiarity in jQuery should be able to follow along. I have broken down my script into two blocks of code so that it is easier to understand.

$(function(){ $('#tabbed-posts .navlinks a').on('click', function(e){ e.preventDefault(); if($(this).hasClass('active')) { return; }

When somebody clicks on any of the anchor elements within .navlinks we first prevent the default action from loading. We simply do not want the HREF value loaded into the address bar. I’m then checking if the clicked link already has a class of .active then we know it’s already displayed and we don’t need to do anything. If the clicked link is already active then the jQuery return command will end the function immediately without processing any further codes.

else { var currentitm = $('#tabbed-posts .navlinks a.active').attr('id'); if(currentitm == 'newpostslink') { var currentlist = $('#tabbed-posts-new'); } if(currentitm == 'popularpostslink') { var currentlist = $('#tabbed-posts-popular'); } if(currentitm == 'randompostslink') { var currentlist = $('#tabbed-posts-random'); } var newitm = $(this).attr('id'); if(newitm == 'newpostslink') { var newlist = $('#tabbed-posts-new'); } if(newitm == 'popularpostslink') { var newlist = $('#tabbed-posts-popular'); } if(newitm == 'randompostslink') { var newlist = $('#tabbed-posts-random'); } $('#tabbed-posts .navlinks a').removeClass('active'); $(this).addClass('active'); $(currentlist).fadeOut(320, function(){ $(newlist).fadeIn(200); }); } // end if/else logic }); // end event handler});

Otherwise the link is not active and we begin the transition process. My widget is fairly circumstantial based on IDs I’ve written into the code myself. You should update these ID values based on your own code samples and which labels can work well for your project. currentitm is a variable targeting the current link while currentlist targets the currently-active container div .tabcontent, which each use their own unique identifier.

We then generate new variables which should be displayed after the animation finishes hiding the old content. newitm pertains to the new link while newlist targets the new div container. The switching process is very easy by using addClass() and removeClass() coupled with the jQuery fading methods.

One point worth noting is the fadeOut() method has to complete before the fadeIn() animation will be called. To ensure this happens I have written a callback function which only runs after the fade out completes. Then inside this callback function we can execute the display of our new tab content list, all of which should complete animating within less than 60 seconds.

Live Demo – Download Source Code

I usually love finding these smaller related widgets in sidebar designs because they show just how much is possible in modern blog layouts. CMS engines like WordPress have open APIs that allow you to build these widgets from custom-coded SQL queries. I have been really impressed with modern design trends and I would expect these widget ideas to continue advancing further into the future.

View the original article here