JSFiddle - React, Tailwind, and code Playground

by kayenglajom

HTML

<div>
  <input type="button" id="sort" value="SORTERA" onclick="sort(this)" data-order="asc" />
</div>
<br/>
<p>Click the button simultaneously to sort list in ascending and descending order.</p>
<p>Refresh page to shuffle list order.</p>
<br/>
<div class="tabset">
  <input type="radio" name="tabset" id="tab1" aria-controls="one" checked>
  <label for="tab1" class="tab" data-tab="pizza-list">1</label>
  <input type="radio" name="tabset" id="tab2" aria-controls="two">
  <label for="tab2" class="tab" data-tab="donut-list">2</label>
  <div class="tab-panels">
    <section id="one" class="tab-panel">
      <ul id="pizza-list" class="grid-container">
        <li>Margerita</li>
        <li>Amigo</li>
        <li>Jamaica</li>
        <li>Marinara</li>
        <li>Florida</li>
        <li>Caruso</li>
      </ul>
    </section>
    <section id="two" class="tab-panel">
      <ul id="donut-list" class="grid-container">
        <li>Africana</li>
        <li>Vegetale</li>
        <li>Quattro Stagioni</li>
        <li>Mexicanska</li>
        <li>Hawaii</li>
        <li>Ingen Köttpizza</li>
      </ul>
    </section>

CSS

.tabset>input[type="radio"] {
  position: absolute;
  left: -200vw;
}

.tabset .tab-panel {
  display: none;
}

.tabset>input:first-child:checked~.tab-panels>.tab-panel:first-child,
.tabset>input:nth-child(3):checked~.tab-panels>.tab-panel:nth-child(2){
  display: block;
}

body {
  font: 16px/1.5em "Overpass", "Open Sans", Helvetica, sans-serif;
  color: #333;
  font-weight: 300;
}

.tabset>label {
  position: relative;
  display: inline-block;
  padding: 15px 15px 25px;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
  font-weight: 600;
}

.tabset>label::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 10px;
  width: 22px;
  height: 4px;
  background: #8d8d8d;
}

.tabset>label:hover,
.tabset>input:focus+label {
  color: #06c;
}

.tabset>label:hover::after,
.tabset>input:focus+label::after,
.tabset>input:checked+label::after {
  background: #06c;
}

.tabset>input:checked+label {
  border-color: #ccc;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}

.tab-panel {
  padding: 30px 0;
  border-top: 1px solid #ccc;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  padding: 30px;
}

.tabset {
  max-width: 65em;
}

JavaScript

function sort(sel) {
  var items = [];
  var listarray = document.getElementsByTagName('li');
  for (var l = 0; l < listarray.length; l++) {
    items.push(listarray[l].textContent);
  }
  if (sel.getAttribute('data-order') == 'asc') {
    sel.setAttribute('data-order', 'desc');
    items.sort();
    console.log(items);
  } else {
    sel.setAttribute('data-order', 'asc');
    items.sort();
    items.reverse();
    console.log(items);
  }

  var ul = document.getElementsByTagName('ul');
  var temp = 0;
  for (var l = 0; l < ul.length; l++) {
    console.log(ul[l].innerHTML);
    ul[l].innerHTML = "";
    for (var i = 0; i < 6; i++) {
      var new_li = document.createElement('li');
      new_li.appendChild(document.createTextNode(items[temp++]));
      ul[l].appendChild(new_li);
    }
  }
}