Testing

by Eric Talviste

HTML

<div id="content-working">
  <div class="wrapper">
    <div class="list">
      <ol>
        <li id="item1" class="item">items1</li>
        <li id="item2" class="item">items2</li>
        <li id="item3" class="item">items3</li>
        <li id="item4" class="item">items4</li>
      </ol>
    </div>
    <div class="image-container">
      <div class="image">
        <img src="https://semantic-ui.com/images/wireframe/image.png" alt="">
      </div>
      <div class="description">
        just a placeholder text for when nothing has been chosen.
      </div>
    </div>
  </div>

</div>

CSS

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


/* containers  */

#content-working {
  margin: 20px;
}

* {
  font-family: Corbel;
}

.wrapper {
  border: 1px solid red;
  padding: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.image,
.description,
.list {
  border: 1px solid #472836;
  box-sizing: border-box;
  margin: 5px;
}


/* list  */

.list {
  width: 150px;
  height: 250px;
  background-color: #9AD2CB;
  overflow-y: auto;
  overflow-x: hidden;
}

.list ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list li {
  padding: 5px;
  transition: all .3s ease;
}

.list li:nth-child(even) {
  background-color: #91f2e6;
  width: 100%;
  height: 100%;
}

.list li:hover,
.list .active {
  cursor: pointer;
  color: red;
  padding-left: 25px;
}


/* sub-container */

.image,
.description {
  width: 150px;
  height: 150px;
}

.image {
  background-color: #D7EBBA;
}

.image img {
  width: 100%;
  height: 100%;
}

.description {
  background-color: #FEFFBE;
  overflow-y: auto;
  overflow-x: hidden;
  height: 95px;
}

JavaScript

// -----------------START OF STYLING ELEMENT-----------------
var btns = document.getElementsByClassName("item");

for (var i = 0; i < btns.length; i++) {

  btns[i].addEventListener("click", function() {

    var siblings = this.parentNode.childNodes
    siblings.forEach(function(element) {

      if (element.className){  // && element.className.indexOf('active') !== -1) { // TAKIT: Removed, see suggestion below
        if (element.classList.contains('active')) // TAKIT: Suggestion: Easier, and better readability!
          element.classList.remove("active");
      }
    })
    this.classList.add("active"); // TAKIT: Suggestion instead of this.className += " active";
  });
}
// -----------------END OF STYLING ELEMENT-----------------


// -----------------START OF LOGIC ELEMENT-----------------


const map = new Map();
// register item element as a key and object with corresponding description / image as value
map.set(item1, {
  desc: 'some description for item1',
  img: 'https://pbs.twimg.com/profile_images/980681269859241984/-4cD6ouV_400x400.jpg'
});
map.set(item2, {
  desc: 'some description item2',
  img: 'https://78.media.tumblr.com/3d4a916d45190b2a58bec61f491cdb99/tumblr_p84af9767X1qhy6c9o1_500.gif'
});
map.set(item3, {
  desc: 'some  item3',
  img: 'https://cdn.europosters.eu/image/1300/32201.jpg'
});
map.set(item4, {
  desc: ' description for item4',
  img: 'https://www.scribblefun.com/wp-content/uploads/2018/02/Pusheen-Coloring-Images.png'
});
// you can bind on click handler for example
const list = document.querySelectorAll('ol'); // TAKIT: Modified to return multiple elements
list.forEach(function() { // TAKIT: Added to manage the multiple elements
  this.addEventListener('click', event => {
    // if element that was registered in our map triggered the event
    if (map.has(event.target)) {
      var wrapper = event.target.closest('.wrapper'); // TAKIT: Get parent wrapper
      // change text of description area
     ...