jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<div class="container">
  <div class="list">
    <ul id="list">
      
    </ul>
  </div>
  <div class="item">
  
  </div>
</div>

CSS

body {
  padding: 0;
  margin: 0;
}
.container {
  min-height: 100vh;
  display: flex;
}

.list {
  background: green;
  flex-grow: 1;
}

.item {
  background: red;
    flex-grow: 1;

}

JavaScript

const items = [];

for (let i = 0; i< 20; i++) {
	items.push({
    title: 'title ' + i,
    description: 'description ' + i
  });
}

const ul = document.getElementById('list');
const targetContainer = document.querySelector('.item');

items.forEach((item, index) => {
	const li = document.createElement('li');
  li.innerText = item.title;
  li.dataset.index = index;
  ul.append(li);
});

ul.addEventListener('click', function(e) {
  const target = e.target;
  if (target.tagName === 'LI') {
  	const entry = items[target.dataset.index];
    targetContainer.innerText = entry.description;
  }
})