JSFiddle - React, Tailwind, and code Playground

by insin

HTML

<div id="lista">
  <ul id="optiuni">
    <li id="titlu-lista-f"><p class="listname-t">Future Events</p></li>
    <li name="opt-3"><a href="#"><p class="listdata">13.04.2011 - 20:00 &nbsp;</p><p class="listname">Partizan</p> </a></li>
    <li name="opt-4"><a href="#"><p class="listdata">14.04.2011 - 20:30 &nbsp;</p><p class="listname">Luiza Zan</p> </a></li>
    <li name="opt-5"><a href="#"><p class="listdata">21.04.2011</p><p class="listname">Târgul bunata?ilor de Pa?ti</p> </a></li>
    <li name="opt-6"><a href="#"><p class="listdata">22.04.2011</p><p class="listname">Târgul bunata?ilor de Pa?ti</p> </a></li>
    <li name="opt-7"><a href="#"><p class="listdata">28.04.2011</p><p class="listname">Alegría, Tapas y Flamenco</p> </a></li>
    <li id="titlu-lista-p"><p class="listname-t">Past Events</p></li>
    <li name="opt-1" class="prima"><a href="#"><p class="listdata">28.02.2011</p><p class="listname">TABU Oscar Party</p> </a></li>
    <li name="opt-2"><a href="#"><p class="listdata">24.03.2011</p><p class="listname">Cheese & Wine</p></a></li>
    <li name="opt-8"><a href="#"><p class="listdata">08.04.2011</p><p class="listname">George Baicea</p></a></li>
  </ul>
</div>
        
<hr>

<div class="centru">
  <div id="continut">
    <div id="opt-2">2</div>
    <div id="opt-1">1</div>
    <div id="opt-3">3</div>
    <div id="opt-4">4</div>
    <div id="opt-5">5</div>
    <div id="opt-6">6</div>
    <div id="opt-7">7</div>
    <div id="opt-8">8</div>
  </div>
</div>

CSS

.link-active { font-weight: bold; }
.link-neactiv { font-style: italic; }

JavaScript

// IE sucks
function addEvent(el, name, handler) {
  if (el.addEventListener) {
    el.addEventListener(name, handler, false);
  } else if (el.attachEvent) {
    // Make sure "this" references the element we're adding the event handler to
    el.attachEvent('on' + name, function() { handler.call(el, window.event); });
  } else {
    el['on' + name] = handler;
  }
}

function eachElementSibling(el, func) {
  var childNodes = el.parentNode.childNodes;
  for (var i = 0, sibling; sibling = childNodes[i]; i++) {
    if (sibling.nodeType !== 1 || sibling === el) {
      continue;
    }
    func(sibling);
  }
}

function activateLink() {
  var elToShow = document.getElementById(this.getAttribute('name'));
  elToShow.style.display = '';
  eachElementSibling(elToShow, function(s) { s.style.display = 'none'; });
  this.className = 'link-active';
  eachElementSibling(this, function(s) {
    if (s.getAttribute('name')) { s.className = 'link-neactiv'; }
  });
}

var items = document.getElementById('optiuni').getElementsByTagName('li');
var initialItem = null;
for (var i = 0, item; item = items[i]; i++) {
  // Need to filter, as non-link items are also present in the list
  if (item.getAttribute('name')) {
    addEvent(item, 'click', activateLink);
    if (item.className === 'prima') {
      initialItem= item;
    }
  }
}
if (initialItem) {
  activateLink.call(initialItem)
}