<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="paginator"> <ul class="pager"> <li class="previous"> <a>Previous</a> </li> <li > <h3 class="fillSpace">Title goes here</h3> </li> <li class="next"> <a>Next</a> </li> </ul> </div> <div> <section class="navSelected NavigationItem" title="Title 1">Section 1</section> <section class="NavigationItem" title="Title 2">Section 2</section> <section class="NavigationItem" title="Title 3">Section 3</section> <section class="NavigationItem" title="Title 4">Section 4</section> <section class="NavigationItem" title="Title 5">Section 5</section> </div> <!-- <a class="prev">Prev</a> <a class="next">Sig</a>-->

.NavigationItem{display:none;} .navSelected { color:red; display: block; } .next, .previous{ cursor:pointer; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } .fillSpace { display:inline-block; padding:0;margin:0; } .paginator { padding: 15px; }

$(function () { //next changeText($('section.navSelected')); $('.next').click(function() { var $el = $('section.navSelected').removeClass('navSelected'); var $next = $el.next(); console.log($next.find('.NavigationItem')); if ($next.length === 0) $next = $('section:first'); changeText($next); $next.addClass('navSelected'); }); //prev $('.previous').click(function() { var $el = $('section.navSelected').removeClass('navSelected'); var $next = $el.prev(); console.log($next.length); if ($next.length === 0) $next = $('section:last'); changeText($next); $next.addClass('navSelected'); }); function changeText(sectSel){ var title = $( sectSel ).attr( "title" ); $('.fillSpace').empty(); $('.fillSpace').append(title); } });