Как скрыть вкладки на pure JavaScript?

Question

[Artem Petrenko]

Всем привет!

Практикуюсь делать вкладки на JavaScript.

Имеется следующий html:

<ul class="tabs">
			<li data-tab="tab-1">Item 1</li>
			<li data-tab="tab-2">Item 2</li>
			<li data-tab="tab-3">Item 3</li>
			<li data-tab="tab-4">Item 4</li>
</ul>

<div class="content">
			<div id="tab-1" class="tabset_content">1</div>
			<div id="tab-2" class="tabset_content hidden">2</div>
		  	<div id="tab-3" class="tabset_content hidden">3</div>
		  	<div id="tab-4" class="tabset_content hidden ">4</div>
</div>

И вот такой скрипт:

var li = document.querySelectorAll('ul.tabs li');
for (var i = 0; i < li.length; i++) {
	li[i].onclick = function() {
		document.getElementById(this.dataset.tab).style.display = 'block';
	}
}

Здесь полностью: https://jsfiddle.net/jx3dq96n/

Вопрос, собственно, в чем. Не получается разобраться как при клике отображать одну вкладку и скрывать другие (как выделить их все, кроме текущей?) Гуглить умею, в инете полно вариантов на jQuery, но хочу разобраться на "чистом" языке.

Answer 1

[Алексей Зуев]

Еще вариант https://jsfiddle.net/7artjega/

Answer 2

[Денис Инешин]

Например так: https://jsfiddle.net/jx3dq96n/1/