user3005003 user3005003 - 4 months ago 17
jQuery Question

Expanding tiles javascript - not working/expanding in site

I'm trying to replicate this demo https://codepen.io/arjancodes/pen/GgMejV on my site but nothing happens on click.

the style and everything is basically correct, but nothing seems to happen when you click on any of the tabs, they should expand to be pull screen with content inside. I did convert the scss in the codepen to css to work on my site, so i'm not sure if the issue may lie there.

<div class="stuff">
<h1>Expanding Tiles</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus architecto aliquid aut harum suscipit similique aspernatur tempora ratione. Velit ad placeat cumque fugit laudantium similique tenetur fuga quisquam, tempora id.
</p>
</div>

<ul class="tiles">
<li class="tiles__tile">
<h2>One</h2>
</li>
<li class="tiles__tile">
<h2>Two</h2>
</li>
<li class="tiles__tile">
<h2>Three</h2>
</li>
<li class="tiles__tile">
<h2>Four</h2>
</li>
</ul>

<ul class="content">
<li class="content__item" id="1">
<div class="content-wrap">
<p style="display:inline-block;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et reprehenderit nostrum nisi aliquam nemo non fugit, minus, ex ullam vel minima libero, eius labore. Veritatis odit blanditiis quidem amet accusantium.</p>
<p style="display:inline-block;">hello more content</p>
<p style="display:inline-block;">and a bit more</p>
<a href="https://www.bbc.co.uk">BUTTON</a>
</div>
</li>
<li class="content__item" id="2">
<div class="content-wrap">
<h3>Bananas</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae impedit aperiam nemo quos fuga illum porro doloribus quisquam quidem reprehenderit, hic tempora, illo id provident aliquam quo officia ea voluptatum.</p>
</div>
</li>
<li class="content__item" id="3">
<div class="content-wrap">
<h3>Cucumbers</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias nam nesciunt maiores. Nesciunt explicabo ea deserunt facere sunt, autem, reiciendis nobis, velit accusantium laudantium quis non ratione aspernatur. Eum, doloribus?</p>
</div>
</li>
<li class="content__item" id="4">
<div class="content-wrap">
<h3>Spinach</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi velit iure expedita quis, blanditiis. Consectetur incidunt distinctio dolor ullam beatae cum maiores quas pariatur amet, temporibus ad commodi dolorem provident.</p>
</div>
</li>
</ul>


CSS

ul {
margin: 0;
padding: 0;
list-style-type: none;
}

.tiles {
position: fixed;
z-index: 5;
bottom: 0;
display: flex;
width: 100%;
}
.tiles__tile {
flex: 1;
padding: 20px;
transition: all .25s ease-out;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.tiles__tile.active:nth-child(1) {
background: tomato;
}
.tiles__tile.active:nth-child(2) {
background: deepskyblue;
}
.tiles__tile.active:nth-child(3) {
background: lightseagreen;
}
.tiles__tile.active:nth-child(4) {
background: crimson;
}
.tiles__tile:hover:nth-child(1) {
background: tomato;
}
.tiles__tile:hover:nth-child(2) {
background: deepskyblue;
}
.tiles__tile:hover:nth-child(3) {
background: lightseagreen;
}
.tiles__tile:hover:nth-child(4) {
background: crimson;
}

.content {
z-index: 10;
height: 100vh;
position: fixed;
top: 0;
}
.content__item {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 10;
display: flex;
align-items: center;
padding: 12vw;
transform: scale(0);
transition: all 0.65s cubic-bezier(0.23, 1, 0.32, 1);
}
.content__item.active {
transform: scale(1);
}
.content__item.active .content-wrap {
transform: scale(1);
opacity: 1;
}
.content__item:nth-child(1) {
transform-origin: 0% 100%;
background: tomato;
}
.content__item:nth-child(2) {
transform-origin: 33% 100%;
background: deepskyblue;
}
.content__item:nth-child(3) {
transform-origin: 66% 100%;
background: lightseagreen;
}
.content__item:nth-child(4) {
transform-origin: 100% 100%;
background: crimson;
}
.content__item .content-wrap {
transform: scale(0.7);
opacity: 0;
transition: all 0.8s 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* --------------- */
.stuff {
margin: 6vw;
max-width: 768px;
}

h2 {
font-weight: 300;
}

h3 {
font-size: 48px;
}

p {
font-weight: 300;
font-size: 24px;
}


JS

var tileBtn = $('li.tiles__tile');
var allContent = $('li.content__item');
var contentWrap = $('.content-wrap');

tileBtn.on('click touchstart', function() {
var self = $(this);
var match = self.attr('data-tile');
var allContent = $('li.content__item');
var content = $('li#' + match);

self.toggleClass('active');

content.toggleClass('active');

contentWrap.css({
'transition-delay': '.35s'
});

return false;
});

$(window).on('click touchstart', function() {
if (allContent.hasClass('active') && tileBtn.hasClass('active')) {
allContent.removeClass('active');
setTimeout(function() {
tileBtn.removeClass('active');
}, 400);
contentWrap.css({
'transition-delay': '.0s'
});

}
})

Answer

It is because you are missing the data attribute on the .tiles__tile elements (data-tile="1" etc.)

Working example:

$(document).ready(function() {
  var tileBtn = $('li.tiles__tile');
  var allContent = $('li.content__item');
  var contentWrap = $('.content-wrap');

  tileBtn.on('click touchstart', function() {
    var self = $(this);
    var match = self.attr('data-tile');
    var allContent = $('li.content__item');
    var content = $('li#' + match);

    self.toggleClass('active');

    content.toggleClass('active');

    contentWrap.css({
      'transition-delay': '.35s'
    });

    return false;
  });

  $(window).on('click touchstart', function() {
    if (allContent.hasClass('active') && tileBtn.hasClass('active')) {
      allContent.removeClass('active');
      setTimeout(function() {
        tileBtn.removeClass('active');
      }, 400);
      contentWrap.css({
        'transition-delay': '.0s'
      });

    }
  });
});
*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  background: indianred;
  color: white;
  font-family: 'Source Sans Pro';
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.tiles {
  position: fixed;
  z-index: 5;
  bottom: 0;
  display: flex;
  width: 100%;
}
.tiles__tile {
  flex: 1;
  padding: 20px;
  transition: all .25s ease-out;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.tiles__tile.active:nth-child(1) {
  background: tomato;
}
.tiles__tile.active:nth-child(2) {
  background: deepskyblue;
}
.tiles__tile.active:nth-child(3) {
  background: lightseagreen;
}
.tiles__tile.active:nth-child(4) {
  background: crimson;
}
.tiles__tile:hover:nth-child(1) {
  background: tomato;
}
.tiles__tile:hover:nth-child(2) {
  background: deepskyblue;
}
.tiles__tile:hover:nth-child(3) {
  background: lightseagreen;
}
.tiles__tile:hover:nth-child(4) {
  background: crimson;
}
.content {
  z-index: 10;
  height: 100vh;
  position: fixed;
  top: 0;
}
.content__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 12vw;
  transform: scale(0);
  transition: all 0.65s cubic-bezier(0.23, 1, 0.32, 1);
}
.content__item.active {
  transform: scale(1);
}
.content__item.active .content-wrap {
  transform: scale(1);
  opacity: 1;
}
.content__item:nth-child(1) {
  transform-origin: 0% 100%;
  background: tomato;
}
.content__item:nth-child(2) {
  transform-origin: 33% 100%;
  background: deepskyblue;
}
.content__item:nth-child(3) {
  transform-origin: 66% 100%;
  background: lightseagreen;
}
.content__item:nth-child(4) {
  transform-origin: 100% 100%;
  background: crimson;
}
.content__item .content-wrap {
  transform: scale(0.7);
  opacity: 0;
  transition: all 0.8s 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
/* --------------- */

.stuff {
  margin: 6vw;
  max-width: 768px;
}
h2 {
  font-weight: 300;
}
h3 {
  font-size: 48px;
}
p {
  font-weight: 300;
  font-size: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stuff">
  <h1>Expanding Tiles</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus architecto aliquid aut harum suscipit similique aspernatur tempora ratione. Velit ad placeat cumque fugit laudantium similique tenetur fuga quisquam, tempora id.
  </p>
</div>

<ul class="tiles">
  <li class="tiles__tile" data-tile="1">
    <h2>One</h2>
  </li>
  <li class="tiles__tile" data-tile="2">
    <h2>Two</h2>
  </li>
  <li class="tiles__tile" data-tile="3">
    <h2>Three</h2>
  </li>
  <li class="tiles__tile" data-tile="4">
    <h2>Four</h2>
  </li>
</ul>

<ul class="content">
  <li class="content__item" id="1">
    <div class="content-wrap">
      <p style="display:inline-block;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et reprehenderit nostrum nisi aliquam nemo non fugit, minus, ex ullam vel minima libero, eius labore. Veritatis odit blanditiis quidem amet accusantium.</p>
      <p style="display:inline-block;">hello more content</p>
      <p style="display:inline-block;">and a bit more</p>
      <a href="https://www.bbc.co.uk">BUTTON</a>
    </div>
  </li>
  <li class="content__item" id="2">
    <div class="content-wrap">
      <h3>Bananas</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae impedit aperiam nemo quos fuga illum porro doloribus quisquam quidem reprehenderit, hic tempora, illo id provident aliquam quo officia ea voluptatum.</p>
    </div>
  </li>
  <li class="content__item" id="3">
    <div class="content-wrap">
      <h3>Cucumbers</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias nam nesciunt maiores. Nesciunt explicabo ea deserunt facere sunt, autem, reiciendis nobis, velit accusantium laudantium quis non ratione aspernatur. Eum, doloribus?</p>
    </div>
  </li>
  <li class="content__item" id="4">
    <div class="content-wrap">
      <h3>Spinach</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi velit iure expedita quis, blanditiis. Consectetur incidunt distinctio dolor ullam beatae cum maiores quas pariatur amet, temporibus ad commodi dolorem provident.</p>
    </div>
  </li>
</ul>