Bootstrap Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by Ismail Ibraheem Shurrab

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<ul class="list-group">
  <li class="list-group-item current ">1111</li>
  <li class="list-group-item">2222222</li>
  <li class="list-group-item">33333333333</li>
  <li class="list-group-item">444444444</li>
  <li class="list-group-item">5555555</li>
</ul>
<a id="next">next</a>
<a id="prev">prev</a>

<p></p>

CSS

.current{
background-color:green;
padding:7px;
font-size:27px; 
}

JavaScript

$("li").not("li:first").hide();
var item=$("li").index();
$("#next").click(function(){
    $("li:visible").hide().next().show().addClass("current");
    var i =  $("li:visible").index();
    $("p").html(i);
    if($("li:visible").is(":last-child"))
     //   alert(i);
      $("#next").hide();
    
});

$("#prev").click(function(){
    
$("li:visible").hide().prev().show().addClass("current");
  var i =  $("li:visible").index();
    $("p").html(i);
      if($("li:visible").is(":first-child"))
     //   alert(i);
      $("#prev").hide();
    if(i!=4)
      $("#next").show();  
});