Fiddling around (with click to expand)

In this example below you will see how to do a Fiddling around (with click to expand) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by hyunjo_on, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright hyunjo_on ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Fiddling around (with click to expand)</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class='top-banner'>
  <div></div>
  <div class='top-banner-content'>
    <div class='top-banner-content-left'>
      <div class='top-banner-content-left-image'></div>
    </div>
    <div class='top-banner-content-right'>
      <div class='top-banner-content-button-wrapper'>
        <div class='top-banner-content-button button'>
          <i class="fa fa-check" aria-hidden="true"></i>
          Liked
        </div>
      </div>
    </div>
  </div>
</div>

<div id="viewport">
  <div id="wrapper">
    <div id="scroller">
      <section class='section-bg'></section>
      <section class='section-items'>
        <section class="card landing">
          <div class="card-content">
            <div class="card-title">Smart Home Living</div>
            <ul class="upsell-card-list">
              <li class="upsell-card" id="upsell-chair">
                <div class="upsell-card-content">
                  <div class="product-image"></div>
                  <div class="product-details">
                    <div class="product-name">
                      LexMod Aegis Accent Chair, Light Gray
                    </div>
                    <div class="price">152.31</div>
                    <div class="prime-icon"></div>
                    <button class="add-to-cart">Add to cart</button>
                  </div>
                </div>
              </li>
              <li class="upsell-card" id="upsell-vase">
                <div class="upsell-card-content">
                  <div class="product-image"></div>
                  <div class="product-details">
                    <div class="product-name">
                      LexMod Aegis Accent Chair, Light Gray
                    </div>
                    <div class="price">152.31</div>
                    <div class="prime-icon"></div>
                    <button class="add-to-cart">Add to cart</button>
                  </div>
                </div>
              </li>
              <li class="upsell-card" id="upsell-pot">
                <div class="upsell-card-content">
                  <div class="product-image"></div>
                  <div class="product-details">
                    <div class="product-name">
                      Silvery pot
                    </div>
                    <div class="price">58.31</div>
                    <div class="prime-icon"></div>
                    <button class="add-to-cart">Add to cart</button>
                  </div>
                </div>
              </li>
              <li class="upsell-card" id="upsell-candle">
                <div class="upsell-card-content">
                  <div class="product-image"></div>
                  <div class="product-details">
                    <div class="product-name">
                      Holy candle
                    </div>
                    <div class="price">43.31</div>
                    <div class="prime-icon"></div>
                    <button class="add-to-cart">Add to cart</button>
                  </div>
                </div>
              </li>
              <li class="upsell-card" id="upsell-mat">
                <div class="upsell-card-content">
                  <div class="product-image"></div>
                  <div class="product-details">
                    <div class="product-name">
                      Blue bath mat
                    </div>
                    <div class="price">21.31</div>
                    <div class="prime-icon"></div>
                    <button class="add-to-cart">Add to cart</button>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <a href="#" class="card-footer shop-all">
            <div>Shop all</div>
            <i class="fa fa-angle-right"></i>
          </a>
        </section>
        
        <section class="card below-critical">
          <div class="card-title">
            Get yourself a little something
          </div>
          <div class="card-content">
            <ul class="tile-list">
              <li class="tile-list-item" id="perfume-1"></li>
              <li class="tile-list-item" id="perfume-2"></li>
              <li class="tile-list-item" id="perfume-3"></li>
              <li class="tile-list-item" id="perfume-4"></li>
            </ul>
          </div>
          <a href="#" class="card-footer shop-all">
            <div>Shop all</div>
            <i class="fa fa-angle-right"></i>
          </a>
        </section>
      </section>
    </div>
  </div>
</div>
  <script src='https://cdn.bootcss.com/iScroll/5.1.1/iscroll-probe.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/hyunjo_on/fiddling-around-with-click-to-expand-wJOWMB */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {
	-webkit-box-sizing: content-box;
	        box-sizing: content-box;
  margin: 0;
  
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

html {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  -ms-touch-action: none;
}

body {
  overflow: hidden;
}

a {
  text-decoration: none;
  color: #8dc3ff;
}

#wrapper {
  position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
}

#scroller {
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	width: 100%;
	-webkit-transform: translateZ(0);
	        transform: translateZ(0);
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	-webkit-text-size-adjust: none;
	   -moz-text-size-adjust: none;
	    -ms-text-size-adjust: none;
	        text-size-adjust: none;
}

.button {
  background: #f1f1f1;
  padding: 8px 12.8px;
  padding: 0.5rem 0.8rem;
  font-size: 19.2px;
  font-size: 1.2rem;
  border-radius: 0.1rem;
}

.top-banner {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 30vw;
  padding: 5vh;
  
}

.top-banner-content {
    height: 100%;
    will-change: trasform, opacity;
    -webkit-transition: 0.01s ease;
    transition: 0.01s ease;
    -webkit-transform-origin: center top;
            transform-origin: center top;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;
  }

.top-banner-content > div {
      height: 100%;-webkit-box-flex: 1;-ms-flex: 1;flex: 1;-ms-flex-item-align: center;align-self: center;
    }

.top-banner-content-left-image {
        height: 100%;
        background: url('http://opentravel.com/explore/photos/pi/15/awesome-flowers-for-decoration.jpg') no-repeat 50% 50%;
        background-size: contain;
      }

.top-banner-content-button {-ms-flex-item-align: center;align-self: center;
    }

.top-banner-content-button .fa-check { color: green; }

.top-banner-content-button-wrapper {
      height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
    }

section {
  background: white;
}

.section-bg {
  height: 40vw;
  background: transparent;
  margin-bottom: 5vh;
}

.card {
  position: relative;
  border: 1px solid lightgray;
  padding: 8px;
  padding: 0.5rem;
  margin: 8px;
  margin: 0.5rem;
  -webkit-transition: 0.3s ease all;
  transition: 0.3s ease all;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.card.item-view-on {
    border-color: transparent;
  }

.card-title {
    font-weight: lighter;
    font-size: 22.4px;
    font-size: 1.4rem;
    padding: 8px 3.2px 16px 3.2px;
    padding: 0.5rem 0.2rem 1rem 0.2rem;
  }

.card-content {
    position: relative;
    padding: 8px;
    padding: 0.5rem;
    border-top: 1px solid lightgray;
    -webkit-transition: 0.3s ease border;
    transition: 0.3s ease border;
  }

.card-content:last-of-type {
      border-bottom: 1px solid lightgray;
    }

.item-view-on .card-content {
      border-color: transparent;
    }

.card-footer {
    position: relative;
    display: block;;
    padding-top: 8px;;
    padding-top: 0.5rem;
  }

.card-footer.shop-all i.fa-angle-right {
        position: absolute;
        bottom: 0;
        right: 8px;
        right: 0.5rem;
        font-size: 24px;
        font-size: 1.5rem;
      }

.card .product-details {
    display: none;
  }

.item-view-on .card .product-details {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-ms-flex-wrap: wrap;flex-wrap: wrap;
    }

.card .price {
    position: relative;
    color: #b7b7b7;
  }

.card .price:before {
      position: absolute;
      left: -8px;
      left: -0.5rem;
      font-size: 12.8px;
      font-size: 0.8rem;
      content: "\0024"; /* $ */
      padding-right: 3.2px;
      padding-right: 0.2rem;
    }

.card .prime-icon {
    display: none;
    opacity: 0;
    visibility: none;
    background-image: url('http://cdn.ndtv.com/tech/images/amazon_prime_check.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

.item-view-on .card .prime-icon {
      display: block;
      opacity: 1;
      visibility: visible;
      height: 24px;
      height: 1.5rem;
      width: 72px;
      width: 4.5rem;
    }

.card .add-to-cart {
    display: none;
    width: 100%;
    background: orange;
    border: none;
    border-radius: 0.2rem;
    padding: 16px;
    padding: 1rem;
  }

.item-view-on .card .add-to-cart {
      display: block;
    }

.card .hero-image {
    text-align: center;
    width: 100%;
    height: 40vw;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }

.card .tile-list {
    list-style-type: none;
    margin: 0;
    padding: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;-ms-flex-wrap: wrap;flex-wrap: wrap;
  }

.card .tile-list-item {
      height: 20vw;
      width: 40vw;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;-webkit-box-flex: 1;-ms-flex: 1 1 auto;flex: 1 1 auto;
    }



.upsell-card {
  display: inline-table;
  height: 20vw;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;-webkit-box-flex: 1;-ms-flex: 1 1 auto;flex: 1 1 auto;
}



.card.item-view-on .upsell-card {
    height: 75vh;
    width: 100%;
  }



.card.item-view-on .upsell-card .product-image {
      width: 100%;
      height: 40vw;
    }



.card.item-view-on .upsell-card .product-details {
      display: block;
    }



.card.item-view-on .upsell-card .price {
      display: inline-block;
      margin-left: 11.2px;
      margin-left: 0.7rem;
    }



.card.item-view-on .upsell-card .prime-icon {
      display: inline-block;
      visibility: visible;
      opacity: 1;
      width: 48px;
      width: 3rem;
      height: 16px;
      height: 1rem;
    }



.card.item-view-on .upsell-card .add-to-cart {
      display: block;
      width: 80vw;
    }



.card:not(.item-view-on) .upsell-card:first-of-type {

    width: 100%;
    height: 40vw;
    margin-bottom: 16px;
    margin-bottom: 1rem;
    padding-bottom: 16px;
    padding-bottom: 1rem;
    border-bottom: 1px solid lightgray;
  }



.card:not(.item-view-on) .upsell-card:first-of-type .product-image {
      text-align: center;
      width: 100%;
      height: 40vw;
    }



.card:not(.item-view-on) .upsell-card:first-of-type .product-details {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
    }

.upsell-card-list {
  list-style-type: none;
  margin: 0;
  padding: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;-ms-flex-pack: distribute;justify-content: space-around;-ms-flex-wrap: wrap;flex-wrap: wrap;
}

.upsell-card-content .product-image {
    width: 20vw;
    height: 20vw;
  }

#upsell-chair .product-image {
  background-image: url('https://www.zurleys.co.uk/media/catalog/product/cache/1/thumbnail/9df78eab33525d08d6e5fb8d27136e95/Z/U/ZUR204724_1/Acke-Scandinavian-Grey-Chair-ZUR204724.jpg');
}

#upsell-vase .product-image {
  background-image: url('http://diyhousehelp.com/wp-content/uploads/2016/12/chive-hanging-hodor-vase.jpg');
}

#upsell-pot .product-image {
  background-image: url('http://www.ikea.com/us/en/images/products/vardagen-pot-with-lid__0416938_PE582513_S4.JPG');
}

#upsell-candle .product-image {
  background-image: url('https://cdn.shopify.com/s/files/1/0987/6688/products/IdahoSoloLarge_grande.jpg?v=1488232881');
}

#upsell-mat .product-image {
  background-image: url('https://www.bluecanyon.co.uk/images/products/3622.jpg');
}

#perfume-1 {
  background-image: url('http://cdn.luxatic.com/wp-content/uploads/2010/09/Joy-Perfume-for-Jean-Patou.jpg');
}

#perfume-2 {
  background-image: url('https://vivamanchester.co.uk/wp-content/uploads/2015/09/perfume-3-edited.jpg');
}

#perfume-3 {
  background-image: url('https://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2016/03/07/16/OG-Jasmine.jpg');
}

#perfume-4 {
  background-image: url('http://www.chanel.com/en_US/fragrance-beauty/cms2export/Site1Files/P113430/S113530_XLARGE.jpg');
}

/*Downloaded from https://www.codeseek.co/hyunjo_on/fiddling-around-with-click-to-expand-wJOWMB */
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

// setup for iscroll (is this really needed?)
// document.addEventListener('touchmove', function (e) {
//   e.preventDefault();
// }, false)

// all about top banner
var topBanner = document.querySelector('.top-banner');
var topBannerContent = document.querySelector('.top-banner-content');
var topBannerHeight = $(topBanner).height();

function onScroll() {
  // top banner
  if (-this.y < topBannerHeight) {
    topBannerContent.style.transform = 'translateY(' + this.y * 0.2 + 'px)';
    topBannerContent.style.opacity = (topBannerHeight + this.y) / topBannerHeight;
  }
}

// create iscroll
var options = {
  probeType: 3,
  // disableMouse: true,
  // disablePointer: true,
  // disableTouch: false,
  mouseWheel: true,
  tap: true,
  indicators: {
    el: topBanner,
    listenX: false,
    fade: false,
    resize: false,
    ignoreBoundaries: true,
    speedRatioY: 0.15
  }
};

var scroller = new IScroll('#wrapper', options);
scroller.on('scroll', onScroll);

// for card expansion
var itemViewOn = 'item-view-on';
var mainCardEl = document.querySelector('.card.landing');
var mainCard = $(mainCardEl);

var mc = new Hammer.Manager(mainCardEl);
mc.add(new Hammer.Tap({ event: 'singletap' }));

var cards = $('.card').get().reverse().map(function (cardEl) {
  var card = $(cardEl);
  return {
    element: cardEl,
    fix: function fix() {
      card.css('top', px(cardEl.offsetTop - 8)).css('left', px(cardEl.offsetLeft - 8)).css('position', 'fixed');
    },
    free: function free() {
      return card.removeAttr('style');
    }
  };
});

var memo = void 0;
var internalScroller = void 0;
mc.on('singletap', function (e) {
  var itemViewEnabled = mainCard.toggleClass(itemViewOn).hasClass(itemViewOn);

  if (itemViewEnabled) {
    scroller.disable();

    // expand to full screen
    memo = _extends({}, mainCard.offset(), {
      width: mainCard.width(),
      height: mainCard.height()
    });
    cards.forEach(function (card) {
      return card.fix();
    });

    mainCard.css('z-index', 2);

    setTimeout(function () {
      mainCard.css('top', -scroller.y).css('left', rem(0)).css('right', rem(0)).css('bottom', rem(0)).css('height', 'calc(100vh)').css('width', 'calc(100vw - 1rem)');

      internalScroller = new IScroll(mainCardEl, {
        snap: false,
        mouseWheel: true
      });
    }, 10);
  } else {
    // nothing in end product
    // toggle back to card view for now
    mainCard.css('top', px(memo.top - scroller.y - 8)).css('width', 'auto').css('height', px(memo.height));

    setTimeout(function () {
      cards.forEach(function (card) {
        return card.free();
      });
      internalScroller.disable();
      internalScroller.refresh();
      scroller.enable();
    }, 400);
  }
});

var px = function px() {
  for (var _len = arguments.length, values = Array(_len), _key = 0; _key < _len; _key++) {
    values[_key] = arguments[_key];
  }

  return values.reduce(function (a, b) {
    return a + b;
  }, 0) + 'px';
};
var rem = function rem() {
  for (var _len2 = arguments.length, values = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
    values[_key2] = arguments[_key2];
  }

  return values.reduce(function (a, b) {
    return a + b;
  }, 0) + 'rem';
};

Comments