Scroller find

Move scroll position to clicked div

by hitech0101

HTML

<body>
<div id ='mainContainer'>
<div class = 'block'></div>
<div class = 'block'></div>
<div class = 'block'></div>
<div class = 'block'></div>
<div class = 'block'></div>
<div class = 'block'></div>
<div class = 'block'></div>
<div class = 'block'></div>
<div class = 'block'></div>
<div class = 'block'></div>
</div>
<div class="second"></div>
<div class="second"></div>
</body>

CSS

#mainContainer{
  max-height:150px;
  overflow:auto;
  display:inline-block;
  width:100%;
}
.block{
  display: inline-block;
  height:45px;
  width:15%;
  background-color:red;
  cursor:pointer;
  margin:2%;
}

.second{
  display:none;
  width:20%;
  height:50px;
  background-color:yellow;
  margin:2%;
  vertical-align:top;
  }

JavaScript

$('.block').click( function () {
	$('#mainContainer').animate({'width':'20%'}, 1000);
  $(this).css({'background-color':'blue'});
  $('.block').css({'display':'block','width':'100%'});
  $('.second').css({'display':'inline-block'})
	});