Select and Show with JQuery

$(document).ready(function(){ 
  $('.screen .screen-slide:first-child').fadeIn(); // отображаем первый слайд 
  $('.select-box').click(function(){ 
    $('.screen .screen-slide').hide() 
    $('#'+$(this).data('value')).fadeIn(); 
  }); 
});

.box { 
  display: flex; 
  height: 600px; 
} 
.box .select { 
  max-width: 100%; 
  width: 320px; 
  overflow-y: scroll; 
  max-height: 100%; 
  height: 600px; 
} 
.box .select-box { 
  padding: 51px; 
  display: flex; 
  border-top: 1px solid #ccc; 
  border-bottom: 1px solid #ccc; 
  cursor: pointer; 
} 
.box .select-box:first-child { 
  border-top: 0; 
} 
.box .select-box:last-child { 
  border-bottom: 0; 
} 
.box .select-box p { 
  font-size: 20px; 
  color: #9fa9a9; 
  margin: auto; 
} 
.box .select-box i { 
  margin-right: 10px; 
  font-size: 48px; 
  color: #3d3e42; 
} 
.box .screen { 
  width: 500px; 
  max-width: 100%; 
  margin: 0 auto; 
  height: 600px; 
} 
.box .screen-slide { 
  display: none; 
} 
.box .screen h1 { 
  font-size: 24px; 
  font-weight: 700; 
  color: #636c6c; 
} 
.box .screen p { 
  font-size: 16px; 
  color: #afb8b8; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="box"> 
   
  <div class="select"> 
    <div class="select-box" data-value="1"> 
      <i class="fa fa-envelope-o"></i>  
      <p>Heading title one</p> 
    </div> 
    <div class="select-box" data-value="2"> 
      <i class="fa fa-music"></i> 
      <p>Heading title one</p> 
    </div> 
    <div class="select-box" data-value="3"> 
      <i class="fa fa-heart"></i> 
      <p>Heading title one</p> 
    </div> 
    <div class="select-box" data-value="4"> 
      <i class="fa fa-user"></i> 
      <p>Heading title one</p> 
    </div> 
    <div class="select-box" data-value="5"> 
      <i class="fa fa-film"></i> 
      <p>Heading title one</p> 
    </div> 
    <div class="select-box" data-value="6"> 
      <i class="fa fa-th-large"></i> 
      <p>Heading title one</p> 
    </div> 
    <div class="select-box" data-value="7"> 
      <i class="fa fa-th"></i> 
      <p>Heading title one</p> 
    </div> 
    <div class="select-box" data-value="8"> 
      <i class="fa fa-check"></i> 
      <p>Heading title one</p> 
    </div> 
    <div class="select-box" data-value="9"> 
      <i class="fa fa-glass"></i> 
      <p>Heading title one</p> 
    </div> 
    <div class="select-box" data-value="10"> 
      <i class="fa fa-star-o"></i> 
      <p>Heading title one</p> 
    </div> 
  </div> 
   
  <div class="screen"> 
    <div id="1" class="screen-slide"> 
      <h1>1 Heading Feature title goes here</h1> 
      <p> 
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a. 
      </p> 
    </div> 
    <div id="2" class="screen-slide"> 
      <h1>2 Heading Feature title goes here</h1> 
      <p> 
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a. 
      </p> 
    </div> 
    <div id="3" class="screen-slide"> 
      <h1>3 Heading Feature title goes here</h1> 
      <p> 
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a. 
      </p> 
    </div> 
    <div id="4" class="screen-slide"> 
      <h1>4 Heading Feature title goes here</h1> 
      <p> 
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a. 
      </p> 
    </div> 
    <div id="5" class="screen-slide"> 
      <h1>5 Heading Feature title goes here</h1> 
      <p> 
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a. 
      </p> 
    </div> 
    <div id="6" class="screen-slide"> 
      <h1>6 Heading Feature title goes here</h1> 
      <p> 
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a. 
      </p> 
    </div> 
    <div id="7" class="screen-slide"> 
      <h1>7 Heading Feature title goes here</h1> 
      <p> 
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a. 
      </p> 
    </div> 
    <div id="8" class="screen-slide"> 
      <h1>8 Heading Feature title goes here</h1> 
      <p> 
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a. 
      </p> 
    </div> 
    <div id="9" class="screen-slide"> 
      <h1>9 Heading Feature title goes here</h1> 
      <p> 
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a. 
      </p> 
    </div> 
    <div id="10" class="screen-slide"> 
      <h1>10 Heading Feature title goes here</h1> 
      <p> 
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a. 
      </p> 
    </div> 
  </div> 
   
</div>