Horizontal animated scroll to div on click

Question

So, I need to make a horizontal accordion scroller which centers the opened div. Code below will help you guys understand:

<div class="wrapper">
    <div class="product">
        <div class="product-title">
            <img src="http://goo.gl/PUr1TP">
        </div>
        <div class="product-all">
            <div style="width: 200px; background: red;"   >1</div>
            <div style="width: 100px; background: yellow;">2</div>
            <div style="width: 400px; background: pink;"  >3</div>
            <div style="width: 270px; background: blue;"  >4</div>
            <div style="width: 500px; background: aqua;"  >5</div>
            <div style="width: 100px; background: green;" >6</div>
        </div>
    </div>
    <div class="product">
        <div class="product-title">
            <img src="https://goo.gl/hRJ3Dz">
        </div>
        <div class="product-all">
            <div style="width: 200px; background: red;"   >1</div>
            <div style="width: 100px; background: yellow;">2</div>
            <div style="width: 400px; background: pink;"  >3</div>
            <div style="width: 270px; background: blue;"  >4</div>
            <div style="width: 500px; background: aqua;"  >5</div>
            <div style="width: 100px; background: green;" >6</div>
        </div>
    </div>
    <div class="product">
        <div class="product-title">
            <img src="https://goo.gl/vX3Aih">
        </div>
        <div class="product-all">
            <div style="width: 200px; background: red;"   >1</div>
            <div style="width: 100px; background: yellow;">2</div>
            <div style="width: 400px; background: pink;"  >3</div>
            <div style="width: 270px; background: blue;"  >4</div>
            <div style="width: 500px; background: aqua;"  >5</div>
            <div style="width: 100px; background: green;" >6</div>
        </div>
    </div>
    <div class="product">
        <div class="product-title">
            <img src="http://goo.gl/rXt3kE">
        </div>
        <div class="product-all">
            <div style="width: 200px; background: red;"   >1</div>
            <div style="width: 100px; background: yellow;">2</div>
            <div style="width: 400px; background: pink;"  >3</div>
            <div style="width: 270px; background: blue;"  >4</div>
            <div style="width: 500px; background: aqua;"  >5</div>
            <div style="width: 100px; background: green;" >6</div>
        </div>
    </div>
</div>

body, html {
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    background: #ccc;
}

html {
    -webkit-box-sizing: border-box; 
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
       -moz-box-sizing: inherit;
            box-sizing: inherit;
}

.wrapper {
    height: 300px;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    margin: 200px 0 0 0;
}

.product, .product-title, .product-all, .product-all div {
    display: inline-block;
    height: 100%;
    vertical-align: top;
}

.product-title img {
    height: 100%;
}

.product {
    position: relative;
}

.button {
    float: right;
    padding: 5px 10px;
    border: 2px solid green;
    cursor: pointer;
}

$(document).ready(function() {    
    $(".product-all").hide(100);
    $(".product-title").click(function() {
        $(".product-all").hide(500);
        $(this).parent().children(".product-all").show(500);

        var scrollTo = $(this).parent().children(".product-title").position().left;
        $('.wrapper').animate({
            'scrollLeft': scrollTo
        }, 800);
    });
});

Above is the code that I have tried, but scrolling seem to go to the very left of my container, not puts the "active" div in the left corner. Any ideas how to fix it? Thanks!

Here is a fiddle

Answer 1

So, I figured it out!

$(document).ready(function() {

 $(".product-all").hide(100);
 $(".product-title").click(function() {

  $(".product-all").hide(500);
  $(this).parent().children(".product-all").show(500);

  //get the index of .product just clicked
  var i = 0;
  var piu = $(this).parent().index();
 //.wrapper
  var wrapper = $(this).parent().parent();
  var scroll_shit = 0;

  while (i < piu) {
   //get width of each .product-title, because the sum of all the previous .product-titles is the needed position
   product = wrapper.children().eq(i);
      scroll_shit = scroll_shit + product.children(".product-title").width();
      i++;
  }

  $('.wrapper').animate({
   'scrollLeft': scroll_shit
  }, 800);
 });

});

Answer 2

I noticed your problem and found a solution.

You didn't got the correct scrollTo. You trying to get the position of all children (with class product-title), but you need the position of the child that was clicked.

var scrollTo = $(this).parent().position().left;

http://fiddle.jshell.net/jxv7641y/1/