cookie corner

Pops out a corner menu from the bottom right with options

by ericbaumann

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="expanded offer-container">
    <div class="menu"><a id="openIcon"><i class="fa fa-bell-o" aria-hidden="true"></i></a>
      <div class="another">
      Use <span class="promoItem" id="promo1"></span>15 for onboard credit.<br>
      Use <span class="promoItem" id="promo2"></span>10 for 10%.<br>
      <a href="#" id="backToOffer">Back to Offer</a>
      <a id="min"><i class="fa fa-window-minimize" aria-hidden="true"></i></a>
      </div>
    </div>
</div>
Is it minimized? <span id="min-debug"></span>

CSS

.offer-container {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 60px;
    width: 215px;
    padding:10px;
}
.menu {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #dd3333;
    height:50px;
    width: 50px;
    transition: all .3s ease;
    color:#fff;
    font-family:'arial';
    text-align:center;
}
.expanded .menu {
    height:100px;
    width: 300px;
    transition: all .3s ease;
}
.expanded #wow{
  display:block;
}
#wow{
  display:none;
}
.expanded .another{
  display:block;
}
.another{
  display:none;
}
.expanded .fa-bell-o{
  display:none;
}
#min{
  //padding:1em;
  float:right;
  margin-right:15px;
}

JavaScript

$( document ).ready(function() {
    var $isItMin = jQuery.cookie('minimized');
    if($isItMin==true){
    	contractMenu();
    }
});
jQuery('#min').click(contractMenu);
jQuery('#openIcon').click(expandMenu);
//Set cookies
var $promoURL = '/jazzwise/'
var $promoKey = 'bns-promo1';
var $promoCode = 'jazzwise';
var $minimized = 'true';
//set cookies on page

jQuery.cookie($promoKey, $promoCode, { expires: 1, path: '/' });
jQuery.cookie('promoURLKey', $promoURL, { expires: 1, path: '/' });

 //Retrieve cookies
var $retrieveURL = jQuery.cookie('promoURLKey');
var $retrievePromo = jQuery.cookie($promoKey);


function contractMenu() {
	jQuery.cookie('minimized', 'true', { expires: 1, path: '/' });
	jQuery('.offer-container').removeClass('expanded');
}
function expandMenu() {
	jQuery.cookie('minimized', 'false', { expires: 1, path: '/' });
	jQuery('.offer-container').addClass('expanded');
}

//

jQuery('.promoItem').text($retrievePromo);
jQuery('#backToOffer').html('<a href="'+$retrieveURL+'">Back to Offer</a>');