<header class="section-wrap header">
  <h1 class="title">accordion slider</h1>
</header>

<div class="wrapper">
  
 <div class="slider-wrap">
   <div class="slider current">
     <button class="index"><span>kobe</span></button>
     <figure class="img">
       first
     </figure>
   </div>
   <div class="slider current">
     <button class="index"><span>kobe</span></button>
     <figure class="img">
       second
     </figure>
   </div>
   <div class="slider current">
     <button class="index"><span>kobe</span></button>
     <figure class="img">
       third
     </figure>
   </div>
   <div class="slider current">
     <button class="index"><span>kobe</span></button>
     <figure class="img">
       fouth
     </figure>
   </div>
   <div class="slider current">
     <button class="index"><span>kobe</span></button>
     <figure class="img">
       fifth
     </figure>
   </div>
  </div>
  
</div>

@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
$f-qsand : 'Quicksand', sans-serif;
$radius-width: 25px;

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  font-family: $f-qsand;
  color: #000;
}
li{
  list-style: none;
}

input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

input[type='button'],
button{
  cursor: pointer;
}

//レイアウト
.section-wrap{
  padding: 3%;
}

//コンテンツエリア
.wrapper{
  max-width: 960px;
  width: 100%;
  padding: 0 3%;
  margin: 0 auto;
}

//ヘッダー
.header{
  text-align: center;
  .title{
    position: relative;
    font-weight: bold;
    font-family: $f-qsand;
    font-size: 40px;
    letter-spacing: .1em;
    color: #233567;
  }
}

//フッター
.footer{
  text-align: center;
  color: #233567;
  font-size: 20px;
}

.slider-wrap{
  width: 100%;
  height: 300px;
  background: transparent;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  
  .slider{
    position: absolute;
    top: 0;
    display: flex;
    width: 100%;
    height: 100%;
    
    .index{
      width: 50px;
      height: 100%;
      color: #fff;
      font-weight: bold;
      border: 1px solid #233567;
      background: #315b96;
      border-radius: $radius-width;
      span{
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
      }
    }
    
    .img{
      display: flex;
      justify-content: center;
      align-items: center;
      color: #233567;
      font-weight: bold;
      width: calc(100% - 50px);
      border-radius: $radius-width;
      background: #ffdfdf;
      transition: width .7s;
    }
    
    &.current{
      width: 100%;
      .img{
        width: calc(100% - 50px);
      }
    }
  }
}

const $sliderWrap = $('.slider-wrap');
const $slider = $sliderWrap.find('.slider');
const $index = $slider.find('.index');
const $img = $slider.find('.img');
const sliderNum = $slider.length;
let indexWidth = $index.width() + 1;
let sliderWrapWidth = $sliderWrap.width();
const duration = 300;

$(window).on('resize', function() {
	sliderWrapWidth = $sliderWrap.width();
});

for(let i = 0; i < sliderNum; i++) {
  $slider.eq(i).css({
    left: i * indexWidth,
    width: sliderWrapWidth - (i * indexWidth)
  }); 
}

$index.on('click', function() {
  let num = $index.index(this);
  let start = sliderWrapWidth - (indexWidth * (sliderNum - num - 1));
  
  for(let i = num; i > 0; i--){
    $slider.eq(i).stop().animate({left: indexWidth * i}, duration, 'swing');
  }
 
  for(let i = num; i < sliderNum; i++) {
    $slider.eq(i + 1).stop().animate({left: start + (indexWidth * (i - num))}, duration, 'swing');
  }
});