Skip to content

Instantly share code, notes, and snippets.

@replete
Created April 14, 2012 15:01
Show Gist options
  • Save replete/2385033 to your computer and use it in GitHub Desktop.
Save replete/2385033 to your computer and use it in GitHub Desktop.
Simple content panes with navigation
/* -------------------------------------- */
//Content panes with navigation
var $panesContainers = $("[data-panes]");
$panesContainers.each(function () {
var $container = $(this),
$items = $container.children($container.attr("data-panes")),
itemTotal = $items.length - 1,
$navigation = $container.find($container.attr("data-panes-navigation"));
if (itemTotal === 0) return;
$navigation
.click(function () {
var $this = $(this),
currentIndex = $navigation.index($this);
changeItem(currentIndex);
})
.attr("href", "javascript:void(0);");
function changeItem(index) {
$navigation
.removeClass("current")
.eq(index)
.addClass("current");
$items
.hide()
.eq(index)
.show();
}
changeItem(0);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment