<div id="player-holder">
   <div id="content">
      <div id="album-cover"></div>
   </div>
   <div id="list-right">
      <div id="list-row1">
         <img src="https://3m84r11gpx1j11puas2g5wfl-wpengine.netdna-ssl.com/wp-content/uploads/2015/12/Tame-Impala-Currents.jpg">
         <p>The Less I Know The Better
            <br> <span>Tame Impala</span></p>
      </div>
      <div id="list-row2">
         <img src="http://cdn2.pitchfork.com/news/55517/8a851f3a.jpg">
         <p>Do You
            <br> <span>Spoon</span></p>
      </div>
      <div id="list-row3">
         <img src="http://i1.wp.com/nialler9.com/wp-content/uploads/2015/02/awa1.jpg?w=687">
         <p>Feel Safe
            <br> <span>All We Are</span></p>
      </div>
      <div id="list-row4">
         <img src="http://static.stereogum.com/uploads/2013/12/War-On-Drugs-Lost-In-The-Dream-608x608.jpg">
         <p>Under The Pressure
            <br> <span>The War On Drugs</span></p>
      </div>

      <div id="list-contract"></div>
      <div id="list-expand"></div>
   </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
   background-color: #EEEEEE;
   font-family: Open Sans;
   margin: 250px 0px 0px 100px;
}

#player-holder {
   height: 324px;
   width: 648px;
   box-shadow: 0px 10px 20px rgba(0, 0, 0, .2)
}

#content {
   position: relative;
   z-index: 1;
   height: 324px;
   width: 324px;
   background-color: #212121;
   border-radius: 4px 0px 0px 4px;
   overflow: hidden;
   float: left;
}

#album-cover {
   background: url("https://3m84r11gpx1j11puas2g5wfl-wpengine.netdna-ssl.com/wp-content/uploads/2015/12/Tame-Impala-Currents.jpg");
   background-size: 324px;
   height: 324px;
   width: 324px;
   transition: all .25s ease;
   background-repeat: repeat;
}

#list-right {
   padding-top: 16px;
   padding-left: 10px;
   padding-right: 10px;
   height: 308px;
   width: 304px;
   background-color: #ffffff;
   float: left;
   border-radius: 0px 4px 4px 0px;
}

#list-right p {
   float: left;
   margin-left: 10px;
   font-family: Open sans;
   margin-top: 10px;
   font-size: 16px;
   color: white;
   font-weight: bold;
}

#list-right span {
   color: #c5c5c5;
   font-size: 12px;
}

#list-row1,
#list-row2,
#list-row3,
#list-row4 {
   height: 64px;
   width: 284px;
   background-color: #30283e;
   float: left;
   padding: 0px 20px 0px 0px;
   border-radius: 4px 32px 32px 4px;
   margin-bottom: 12px;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
   transition: all .2s ease;
   cursor: pointer;
}

#list-row1 img,
#list-row2 img,
#list-row3 img,
#list-row4 img {
   float: right;
   height: 64px;
   margin-right: -24px;
   margin-left: 10px;
   border-radius: 32px;
}

#list-contract,
#list-expand {
   height: 28px;
   width: 16px;
   background-color: white;
   position: relative;
   float: right;
   margin-top: -98px;
   margin-right: -18px;
   border-radius: 20px;
   padding-top: 4px;
   padding-left: 2px;
   box-shadow: 0px 0px 12px #00000026;
}

#list-expand {
   display: none;
}
$(document).ready(function() {

   $('#list-row1').click(function() {
      $('#album-cover').css('background', 'url("https://3m84r11gpx1j11puas2g5wfl-wpengine.netdna-ssl.com/wp-content/uploads/2015/12/Tame-Impala-Currents.jpg")');
      $('#album-cover').css('background-size', '324px');
      $('#list-row1').css('background-color', '#5e495e');
      $('#list-row2, #list-row3, #list-row4').css('background-color', '#30283e');
      $('#list-row1').css('box-shadow', 'none');
      $('#list-row2, #list-row3, #list-row4').css('box-shadow', '0px 2px 4px rgba(0, 0, 0, 0.5)');
   });

   $('#list-row2').click(function() {
      $('#album-cover').css('background', 'url("http://cdn2.pitchfork.com/news/55517/8a851f3a.jpg")');
      $('#album-cover').css('background-size', '324px');
      $('#list-row1, #list-row3, #list-row4').css('background-color', '#30283e');
      $('#list-row2').css('background-color', '#464887');
      $('#list-row1, #list-row3, #list-row4').css('box-shadow', '0px 2px 4px rgba(0, 0, 0, 0.5)');
      $('#list-row2').css('box-shadow', 'none');
   });

   $('#list-row3').click(function() {
      $('#album-cover').css('background', 'url("http://i1.wp.com/nialler9.com/wp-content/uploads/2015/02/awa1.jpg?w=687")');
      $('#album-cover').css('background-size', '324px');
      $('#list-row1, #list-row2, #list-row4').css('background-color', '#30283e');
      $('#list-row3').css('background-color', '#1662a1');
      $('#list-row1, #list-row2, #list-row4').css('box-shadow', '0px 2px 4px rgba(0, 0, 0, 0.5)');
      $('#list-row3').css('box-shadow', 'none');
   });

   $('#list-row4').click(function() {
      $('#album-cover').css('background', 'url("http://static.stereogum.com/uploads/2013/12/War-On-Drugs-Lost-In-The-Dream-608x608.jpg")');
      $('#album-cover').css('background-size', '324px');
      $('#list-row1, #list-row2, #list-row3').css('background-color', '#30283e');
      $('#list-row4').css('background-color', '#5a4941');
      $('#list-row1, #list-row2, #list-row3').css('box-shadow', '0px 2px 4px rgba(0, 0, 0, 0.5)');
      $('#list-row4').css('box-shadow', 'none');
   });

   $('#list-contract').click(function() {
      $('#list-right').css('margin-left', '-244px');
      $('#list-right p').css('display', 'none');
      $('#player-holder').css('width', '404px');
      $('#list-expand').css('display', 'inline-block');
      $('#list-contract').css('display', 'none');
      $('#list-right').css('background-color', '#eeeeee');
   });

   $('#list-expand').click(function() {
      $('#list-right').css('margin-left', '0px');
      $('#list-right p').css('display', 'inline');
      $('#player-holder').css('width', '648px');
      $('#list-expand').css('display', 'none');
      $('#list-contract').css('display', 'inline-block');
      $('#list-right').css('background-color', 'white');
   });

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js