<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script> <style>  #card_bg {     background-position: 50% 100%;     box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px -2px;     box-sizing: border-box;    width: auto;    height: auto;   min-width:320px;     position: relative;     text-align: left;     text-rendering: optimizelegibility;     background: rgb(255, 255, 255) linear-gradient(transparent 50%, rgb(255, 255, 255) 50%) repeat-x scroll 50% 100% / 2px 2px padding-box border-box;     border: 0px none rgba(55, 70, 72, 0.8);     border-radius: 2px 2px 2px 2px;   overflow: auto;     outline: rgba(55, 70, 72, 0.8) none 0px;    -webkit-font-smoothing: antialiased;  }   .hero_text {  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;    color: green;   font-weight: bold;  font-size: 55px;    padding-top: 10px;  padding-left: 20px;     padding-right: 20px;    margin: 0px;    letter-spacing: -2px;   -webkit-font-smoothing: antialiased; }  .sub_text {     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;    color: #535860;     font-size: 18px;    padding-left: 20px;     padding-right: 20px;    padding-top: 0px;   margin-top: -2px;   -webkit-font-smoothing: antialiased; }  .link {     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;    color: #535860;     font-size: 16px;    padding-left: 20px;     padding-right: 10px;    padding-top: 16px;  padding-bottom: 8px;    line-height: 0px;   margin-top: 0px;    float: left;    -webkit-font-smoothing: antialiased; } .link:hover {    color: green;     }  .collapse_share {   position: relative;   margin-top: 60px;   display: none;   height:54px;   background-color: green;   clear: both;   text-align: center;   -webkit-box-shadow: inset 0px 8px 9px -5px rgba(0,0,0,0.5); -moz-box-shadow: inset 0px 8px 9px -5px rgba(0,0,0,0.5); box-shadow: inset 0px 8px 9px -5px rgba(0,0,0,0.5)  }    .share_icons{  width: 20%;     height: 54px;   float:left;     opacity: 0.9;  }  .ico_padding{ width: 20%; height: 25px; float: left; padding-top: 14px; }  </style>   <script> jQuery(document).ready(function() {   $(document).on("click",".showSingle",function(){       $('.showSingle').toggleClass('hide');       var index = $(this).attr('id');       newTarget = $('.share_sheet_'+index).slideDown('fast');         $('.collapse_share').not(newTarget).slideUp('fast');              });   $(document).on("click",".collapse_share",function() {     $('.collapse_share').slideUp('fast');     $('.showSingle').removeClass('hide');          });  $(document).on("click",".hide",function() {     $('.collapse_share').slideUp('fast');  });   });    </script>       <div id="card_bg"> <p class="hero_text">We love design</p> <p class="sub_text">We love design</p> <p class="link showSingle" id="2">EXPAND ></p> <div class="share_sheet_2 collapse_share"> </div> </div>