jQuery toggleClass example

Toggle class name on click in jQuery

by joshmoto

HTML

<section class="wrapper">
  <h2 class="sentence">A Global Leader in <!--
    --><span class="sliding-vertical" data-current="3PL">
      <ul>
        <li>3PL</li>
        <li style="display:none;">Trading</li>
        <li style="display:none;">Manufacturing</li>
        <li style="display:none;">Warehousing</li>
        <li style="display:none;">Distribution</li>
      </ul>
    </span><!--
    --> etc...
  </h2>
</section>

SCSS

.sentence {
  color: #222;
  font-size: 3rem;
}

.wrapper {
  background-color: red;
  font-family: 'Cabin', sans-serif;
  padding: 0px 0px;
  position: relative;
  width: 100%;
}

.sliding-vertical {
  display: inline;
  position: relative;
  line-height: 1;
  width: 100px;
  height: 3rem;
  overflow-x: hidden;
  background: green;
}

.sliding-vertical:before {
  content: attr(data-current);
  opacity: 0;
  display: inline;
}

.sliding-vertical > UL {
  position: absolute;
  display: block;
  background: blue;
  color: #00abe9;
  left: 0;
  top: 0;
  line-height: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sliding-vertical > UL > LI {
  display: block;
  background: cyan;
  color: #00abe9;
  line-height: initial;
  margin: 0;
  padding: 0;
  float: left;
  clear: both;
}

.sliding-vertical > UL > LI > SPAN {
  background: #fff;
  line-height: 1;
  pointer-events: none;
}

JavaScript

$(document).ready(function() {

  $('.sliding-vertical').each(function(i, list) {
  
    //console.log(this);
    
    let items = {};

    $('UL > LI', this).each(function(i, item) {
    
       items[i] = item;
       
       
    
    });
    
    console.log(items);

  });

});