<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="container"> <div class="col-lg-4"> <ul class="list-group"> <li class="list-group-item active item1">Page 1</li> <li class="list-group-item item2">Page 2</li> <li class="list-group-item item3">Page 3</li> <li class="list-group-item item4">Page 4</li> <li class="list-group-item item5">Page 5</li> </ul> </div> <div class="col-lg-8"> <section class="page1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas mi quis euismod interdum. Aenean sagittis posuere consequat. Ut non cursus felis, at imperdiet metus. In lobortis mi lectus, eget varius enim egestas a. Nam pellentesque in arcu tempus tincidunt. Praesent sit amet vestibulum tortor. Cras scelerisque mauris mauris, ut ullamcorper nisi adipiscing eget. Suspendisse potenti. Praesent ac auctor dui, vitae facilisis tortor. Morbi imperdiet volutpat imperdiet. Praesent ultrices porta mi, ut dictum leo consectetur eget. Morbi imperdiet condimentum orci sed laoreet.<br /> Nulla facilisi. Nullam ultrices lobortis ligula a dignissim. Nam ut varius ante. Etiam egestas nisl sapien, ac dignissim erat sagittis convallis. Aliquam erat volutpat. Vestibulum viverra sollicitudin augue eget vestibulum. Suspendisse viverra mauris sed dolor pharetra, nec dapibus dui hendrerit. Nulla ut fringilla sem, semper lacinia massa. Proin ante augue, luctus sed risus quis, hendrerit lobortis nisi. Proin eu urna condimentum, ultrices nulla et, mollis velit. Donec sodales molestie lacus, sed tempor tortor pretium vel. Curabitur venenatis tempor mauris eget posuere. Maecenas interdum sollicitudin elit, sit amet pharetra orci scelerisque at.<br /> Quisque ac odio et ipsum porttitor malesuada non sit amet ipsum. Nullam accumsan risus ut pharetra placerat. Phasellus sit amet bibendum tellus, ac sollicitudin lacus. Duis eget nulla quis turpis accumsan eleifend. Praesent eget ultricies sapien, at pulvinar sapien. Mauris dapibus, nunc non mollis rhoncus, ipsum diam luctus augue, vel fermentum metus dui id leo. Cras venenatis molestie consequat. Proin viverra in tortor id eleifend. Duis accumsan eros a ornare pretium. Sed pharetra erat id volutpat dapibus. Cras quis ornare ligula, quis consequat urna.<br /> </section> <section class="page2" style="display:none;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas mi quis euismod interdum. Aenean sagittis posuere consequat. Ut non cursus felis, at imperdiet metus. In lobortis mi lectus, eget varius enim egestas a. Nam pellentesque in arcu tempus tincidunt. Praesent sit amet vestibulum tortor. Cras scelerisque mauris mauris, ut ullamcorper nisi adipiscing eget. Suspendisse potenti. Praesent ac auctor dui, vitae facilisis tortor. Morbi imperdiet volutpat imperdiet. Praesent ultrices porta mi, ut dictum leo consectetur eget. Morbi imperdiet condimentum orci sed laoreet.<br /> Nulla facilisi. Nullam ultrices lobortis ligula a dignissim. Nam ut varius ante. Etiam egestas nisl sapien, ac dignissim erat sagittis convallis. Aliquam erat volutpat. Vestibulum viverra sollicitudin augue eget vestibulum. Suspendisse viverra mauris sed dolor pharetra, nec dapibus dui hendrerit. Nulla ut fringilla sem, semper lacinia massa. Proin ante augue, luctus sed risus quis, hendrerit lobortis nisi. Proin eu urna condimentum, ultrices nulla et, mollis velit. Donec sodales molestie lacus, sed tempor tortor pretium vel. Curabitur venenatis tempor mauris eget posuere. Maecenas interdum sollicitudin elit, sit amet pharetra orci scelerisque at.<br /> Quisque ac odio et ipsum porttitor malesuada non sit amet ipsum. Nullam accumsan risus ut pharetra placerat. Phasellus sit amet bibendum tellus, ac sollicitudin lacus. Duis eget nulla quis turpis accumsan eleifend. Praesent eget ultricies sapien, at pulvinar sapien. Mauris dapibus, nunc non mollis rhoncus, ipsum diam luctus augue, vel fermentum metus dui id leo. Cras venenatis molestie consequat. Proin viverra in tortor id eleifend. Duis accumsan eros a ornare pretium. Sed pharetra erat id volutpat dapibus. Cras quis ornare ligula, quis consequat urna.<br /> </section> <section class="page3" style="display:none;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas mi quis euismod interdum. Aenean sagittis posuere consequat. Ut non cursus felis, at imperdiet metus. In lobortis mi lectus, eget varius enim egestas a. Nam pellentesque in arcu tempus tincidunt. Praesent sit amet vestibulum tortor. Cras scelerisque mauris mauris, ut ullamcorper nisi adipiscing eget. Suspendisse potenti. Praesent ac auctor dui, vitae facilisis tortor. Morbi imperdiet volutpat imperdiet. Praesent ultrices porta mi, ut dictum leo consectetur eget. Morbi imperdiet condimentum orci sed laoreet.<br /> Nulla facilisi. Nullam ultrices lobortis ligula a dignissim. Nam ut varius ante. Etiam egestas nisl sapien, ac dignissim erat sagittis convallis. Aliquam erat volutpat. Vestibulum viverra sollicitudin augue eget vestibulum. Suspendisse viverra mauris sed dolor pharetra, nec dapibus dui hendrerit. Nulla ut fringilla sem, semper lacinia massa. Proin ante augue, luctus sed risus quis, hendrerit lobortis nisi. Proin eu urna condimentum, ultrices nulla et, mollis velit. Donec sodales molestie lacus, sed tempor tortor pretium vel. Curabitur venenatis tempor mauris eget posuere. Maecenas interdum sollicitudin elit, sit amet pharetra orci scelerisque at.<br /> Quisque ac odio et ipsum porttitor malesuada non sit amet ipsum. Nullam accumsan risus ut pharetra placerat. Phasellus sit amet bibendum tellus, ac sollicitudin lacus. Duis eget nulla quis turpis accumsan eleifend. Praesent eget ultricies sapien, at pulvinar sapien. Mauris dapibus, nunc non mollis rhoncus, ipsum diam luctus augue, vel fermentum metus dui id leo. Cras venenatis molestie consequat. Proin viverra in tortor id eleifend. Duis accumsan eros a ornare pretium. Sed pharetra erat id volutpat dapibus. Cras quis ornare ligula, quis consequat urna.<br /> </section> <section class="page4" style="display:none;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas mi quis euismod interdum. Aenean sagittis posuere consequat. Ut non cursus felis, at imperdiet metus. In lobortis mi lectus, eget varius enim egestas a. Nam pellentesque in arcu tempus tincidunt. Praesent sit amet vestibulum tortor. Cras scelerisque mauris mauris, ut ullamcorper nisi adipiscing eget. Suspendisse potenti. Praesent ac auctor dui, vitae facilisis tortor. Morbi imperdiet volutpat imperdiet. Praesent ultrices porta mi, ut dictum leo consectetur eget. Morbi imperdiet condimentum orci sed laoreet.<br /> Nulla facilisi. Nullam ultrices lobortis ligula a dignissim. Nam ut varius ante. Etiam egestas nisl sapien, ac dignissim erat sagittis convallis. Aliquam erat volutpat. Vestibulum viverra sollicitudin augue eget vestibulum. Suspendisse viverra mauris sed dolor pharetra, nec dapibus dui hendrerit. Nulla ut fringilla sem, semper lacinia massa. Proin ante augue, luctus sed risus quis, hendrerit lobortis nisi. Proin eu urna condimentum, ultrices nulla et, mollis velit. Donec sodales molestie lacus, sed tempor tortor pretium vel. Curabitur venenatis tempor mauris eget posuere. Maecenas interdum sollicitudin elit, sit amet pharetra orci scelerisque at.<br /> Quisque ac odio et ipsum porttitor malesuada non sit amet ipsum. Nullam accumsan risus ut pharetra placerat. Phasellus sit amet bibendum tellus, ac sollicitudin lacus. Duis eget nulla quis turpis accumsan eleifend. Praesent eget ultricies sapien, at pulvinar sapien. Mauris dapibus, nunc non mollis rhoncus, ipsum diam luctus augue, vel fermentum metus dui id leo. Cras venenatis molestie consequat. Proin viverra in tortor id eleifend. Duis accumsan eros a ornare pretium. Sed pharetra erat id volutpat dapibus. Cras quis ornare ligula, quis consequat urna.<br /> </section> <section class="page5" style="display:none;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas mi quis euismod interdum. Aenean sagittis posuere consequat. Ut non cursus felis, at imperdiet metus. In lobortis mi lectus, eget varius enim egestas a. Nam pellentesque in arcu tempus tincidunt. Praesent sit amet vestibulum tortor. Cras scelerisque mauris mauris, ut ullamcorper nisi adipiscing eget. Suspendisse potenti. Praesent ac auctor dui, vitae facilisis tortor. Morbi imperdiet volutpat imperdiet. Praesent ultrices porta mi, ut dictum leo consectetur eget. Morbi imperdiet condimentum orci sed laoreet.<br /> Nulla facilisi. Nullam ultrices lobortis ligula a dignissim. Nam ut varius ante. Etiam egestas nisl sapien, ac dignissim erat sagittis convallis. Aliquam erat volutpat. Vestibulum viverra sollicitudin augue eget vestibulum. Suspendisse viverra mauris sed dolor pharetra, nec dapibus dui hendrerit. Nulla ut fringilla sem, semper lacinia massa. Proin ante augue, luctus sed risus quis, hendrerit lobortis nisi. Proin eu urna condimentum, ultrices nulla et, mollis velit. Donec sodales molestie lacus, sed tempor tortor pretium vel. Curabitur venenatis tempor mauris eget posuere. Maecenas interdum sollicitudin elit, sit amet pharetra orci scelerisque at.<br /> Quisque ac odio et ipsum porttitor malesuada non sit amet ipsum. Nullam accumsan risus ut pharetra placerat. Phasellus sit amet bibendum tellus, ac sollicitudin lacus. Duis eget nulla quis turpis accumsan eleifend. Praesent eget ultricies sapien, at pulvinar sapien. Mauris dapibus, nunc non mollis rhoncus, ipsum diam luctus augue, vel fermentum metus dui id leo. Cras venenatis molestie consequat. Proin viverra in tortor id eleifend. Duis accumsan eros a ornare pretium. Sed pharetra erat id volutpat dapibus. Cras quis ornare ligula, quis consequat urna.<br /> </section> <div class='btnnext'><button class="btn btn-success">Next</button></div> </div> </div>

.container { margin-top: 1vh; height:97vh; padding: 5px; } .col-lg-8 { border:1px solid #dddddd; padding: 5px; height:97vh; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .active { background: #428bca; color:white; border:0; } .btnnext { position: absolute; bottom: 1vh; right:1vw; }

$(document).ready(function() { var currentPage = 1; $('.btnnext').click(function() { $('.page' + currentPage).fadeOut(500, function() { $('.page' + (currentPage + 1)).fadeIn(); $('.item' + currentPage).removeClass('active'); currentPage++; $('.item' + currentPage).addClass('active'); }); }); });