How do you show current tab in javascript for loop and hide all others tabs using ES6 -

i got tabs work issue don't think follows javascript's don't repeat yourself. can see code had create individual loops each tab tab show. idea click tab , description block particular tab show. click tab[0] show descriptionblock[0] etc...i want initial descriptionblock show on pageload. please no jquery, es6 javascript ideal. suggestions helpful...

//product overview tabs       	const tabs = document.queryselectorall('.tablist li');  	const descriptionblock = document.queryselectorall('.descriptionblock');  	for (let = 0; < tabs.length; i++) {  		tabs[i].addeventlistener('click', (ev) => { ev.preventdefault(); });  	}    	tabs[0].onclick = () => {  		descriptionblock[0].style.display = "block";   		for (let = 1; < descriptionblock.length; i++) {  			descriptionblock[i].style.display = "none";  		}  	}   	  	tabs[1].onclick = () => {  		descriptionblock[1].style.display = "block";   		for (let = 0; < descriptionblock.length; i++) {  			if (i === 1) {  				continue;  			}  			descriptionblock[i].style.display = "none";  		}  	}   	tabs[2].onclick = () => {  		descriptionblock[2].style.display = "block";   		for (let = 0; < descriptionblock.length; i++) {  			if (i === 2) {  				continue;  			}  			descriptionblock[i].style.display = "none";  		}  	}   	tabs[3].onclick = () => {  		descriptionblock[3].style.display = "block";   		for (let = 0; < descriptionblock.length; i++) {  			if (i === 3) {  				continue;  			}  			descriptionblock[i].style.display = "none";  		}  	}   	tabs[4].onclick = () => {  		descriptionblock[4].style.display = "block";   		for (let = 0; < descriptionblock.length; i++) {  			if (i === 4) {  				continue;  			}  			descriptionblock[i].style.display = "none";  		}  	}   	tabs[5].onclick = () => {  		descriptionblock[5].style.display = "block";   		for (let = 0; < descriptionblock.length; i++) {  			if (i === 5) {  				continue;  			}  			descriptionblock[i].style.display = "none";  		}  	}   	tabs[6].onclick = () => {  		descriptionblock[6].style.display = "block";   		for (let = 0; < descriptionblock.length; i++) {  			if (i === 6) {  				continue;  			}  			descriptionblock[i].style.display = "none";  		}  	}   	tabs[7].onclick = () => {  		descriptionblock[7].style.display = "block";   		for (let = 0; < 8; i++) {  			if (i === 7) {  				continue;  			}  			descriptionblock[i].style.display = "none";  		}  	}  	tabs[8].onclick = () => {  		descriptionblock[8].style.display = "block";   		for (let = 0; < 8; i++) {  			descriptionblock[i].style.display = "none";  		}  	}  

<div class="overview-wrapper" id="overview">  		<h2>pro<span>duct overv</span>iew</h2>  		<div>  			<div class="product-tabs">  				<div class="miniproduct-wrapper">  					<img src="/_img/models/model_j.png" alt="model j" title="model j" width="150" height="150">  					<h3>model j6</h3>  				</div>  				<div>  					<div class="down-arrow"></div>  				</div>  				<ul class="tablist">  					<li><a href="">key features</a></li>  					<li><a href="">specifications</a></li>  					<li><a href="">dimensions</a></li>  					<li><a href="">product builder</a></li>  					<li><a href="">sizing chart</a></li>  					<li><a href="">dish machine<br>cross reference<br>chart</a></li>  					<li><a href="">options</a></li>  					<li><a href="">support</a></li>  					<li><a href="">faqs</a></li>  				</ul>  			</div>  			<div class="description-tabs">  				<div class="descriptionblock" style="display:block;">1</div>  				<div class="descriptionblock">2</div>  				<div class="descriptionblock">3</div>  				<div class="descriptionblock">4</div>  				<div class="descriptionblock">5</div>  				<div class="descriptionblock">6</div>  				<div class="descriptionblock">7</div>  				<div class="descriptionblock">8</div>  				<div class="descriptionblock">9</div>  			</div>  		</div>  	</div>

define function showblock(index) loops on blocks , shows 1 corresponding index. loop on tabs , add event listener calls showblock corresponding index. might want google event delegation avoid adding multiple event listeners.

const tabs = document.queryselectorall('.tablist li')  const descriptionblocks = document.queryselectorall('.descriptionblock')    const entries = function*(iterable) {    let = 0;    (item of iterable) {      yield [i++, item]    }  }    const showblock = index => {    (const [blockindex, block] of entries(descriptionblocks)) {      block.style.display = blockindex === index ? 'block' : 'none'    }  }    showblock(0)    (const [tabindex, tab] of entries(tabs)) {    tab.addeventlistener('click', ev => {      ev.preventdefault()      showblock(tabindex)    })  }

<div class="overview-wrapper" id="overview">    <h2>pro<span>duct overv</span>iew</h2>    <div>      <div class="product-tabs">        <div class="miniproduct-wrapper">          <img src="/_img/models/model_j.png" alt="model j" title="model j" width="150" height="150">          <h3>model j6</h3>        </div>        <div>          <div class="down-arrow"></div>        </div>        <ul class="tablist">          <li><a href="">key features</a></li>          <li><a href="">specifications</a></li>          <li><a href="">dimensions</a></li>          <li><a href="">product builder</a></li>          <li><a href="">sizing chart</a></li>          <li><a href="">dish machine<br>cross reference<br>chart</a></li>          <li><a href="">options</a></li>          <li><a href="">support</a></li>          <li><a href="">faqs</a></li>        </ul>      </div>      <div class="description-tabs">        <div class="descriptionblock" style="display:block;">1</div>        <div class="descriptionblock">2</div>        <div class="descriptionblock">3</div>        <div class="descriptionblock">4</div>        <div class="descriptionblock">5</div>        <div class="descriptionblock">6</div>        <div class="descriptionblock">7</div>        <div class="descriptionblock">8</div>        <div class="descriptionblock">9</div>      </div>    </div>  </div>