A Pen by Jatinder.

Compare-Widget-fixed.markdown

Compare Widget fixed

A Pen by Jatinder on CodePen.

License.

index.html

<div class="wrapper">
  
  <div class="compare-widget-position">
    <div class="plan-compare-widget js-plan-compare-widget">

      <a class="plan-compare-handle js-compare-handle" href="javascript:void(0);">Hide</a>
      <div class="plan-compare-content">
        <div class="plan-holder">
          <img src="" alt="plan-image-src" />
          <div class="pull-left">PPO</div>
          <div class="pull-right">$38.98 p/m</div>
        </div>
        <div class="plan-holder"></div>
        <div class="plan-holder">
          <span class="emptyPlanText">Add a Plan</span>
        </div>
        <div class="plan-holder plan-action">
          <div class="table-cell"><a href="javascript:void(0);" class="btn btn-primary btn-large" >Compare Now</a></div>
          
        </div>
      </div>

    </div>
  </div>
</div>

script.js

$(function(){

  
  $('.js-plan-compare-widget').on('click','.js-compare-handle',function(){
    var me = $(this);
    
    if(me.text() == 'Hide'){
      $('.js-plan-compare-widget').animate({
        bottom: '-100px'
      });
      me.text('Show');
    }
    else if(me.text() == 'Show'){
      $('.js-plan-compare-widget').animate({
        bottom: '0'
      });
      me.text('Hide');
    }
  });
});

style.css

.wrapper{
  position:relative;
  width:700px;
  margin:0 auto;
  font-size:13px;
  font-family:tahoma;
  border:1px solid red; 
  min-height:570px;}

.pull-left{float:left;}
.pull-right{float:right;}

.compare-widget-position{
  position:fixed; 
  bottom:0;     
  right:auto; 
  left:auto; 
  width:700px;
  margin: 0 auto;
  border:1px solid blue;
  height:0;}

.plan-compare-widget{
  box-sizing: border-box;
  
  background:#;
  
  border: 2px solid #545454;
  min-width: 565px;
  min-height: 100px;
  position: absolute;
  right: 10px;
  bottom: 0;
  
  padding: 10px;
}
.plan-compare-handle{
  text-decoration:none;
  color:#444;
  
  position:absolute; 
  top:-26px;
  right:6px;
  border:2px solid #333; 
  float:right; 
  padding:3px 8px;
  text-align:center;
  cursor: pointer;
  
  
  border-radius: 3px 3px 0 0;

  min-width:35px;}
.plan-compare-content .plan-holder{
  
  float:left;
  width:127px;
  min-height:80px;
  border:1px solid #ccc;
  background:#eee; 
  margin-right:8px;
  display:table; 
}
.plan-compare-content .plan-holder img{width:100%; margin-bottom:8px;}

.plan-compare-content .plan-holder:last-child{margin-right:0;}

.plan-compare-content .plan-holder .emptyPlanText{
  font-size:16px;
  color:#aaa;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
   font-size:13px;
}
.plan-compare-content .plan-action{background:none;
  border:none;
  text-align:center;
  vertical-align:middle;
}

.plan-compare-content .table-cell{
  display:table-cell; 
  vertical-align:middle;}

.plan-compare-content .plan-action .btn-large{
  background:blue;
  color:#fff; 
  padding:6px 11px; 
  text-decoration:none;
  margin:0 auto;
}