Реализация slideToggle() на чистом JS

[IvanRu08]

Итак, появилась необходимость раскрывать/скрывать меню с анимацией. Ради одного slidetoggle не очень хочется подключать jQuery. Поэтому возник вопрос, можно ли это относительно просто реализовать на чистом JS? Все решения, которые я нашел в интернете, очень длинные. 

Реализовать с помощью height 0% - 100% и transition - не вариант. При height 0% скрывает не все меню.

И еще один вопрос. Стоит ли сейчас вообще использоваться jQuery в проектах? Или появились уже более легкие и современные аналоги?

[DivMan]

<div id="accordion">
        <h3 class="">JavaScript</h3>
        <div class="tabs__text" id="tabs-1" style="height: 0px;">
            <p>
                JavaScript — прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript.
            </p>
            <p>
                JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
            </p>
        </div>
        <h3 class="">Jquery</h3>
        <div class="tabs__text" id="tabs-2" style="height: 0px;">
            <p>
                jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. Сейчас разработка jQuery ведётся командой jQuery во главе с Джоном Резигом.
            </p>
        </div>
        <h3 class="select">DOM</h3>
        <div class="tabs__text" id="tabs-3" style="height: 52px;">
            <p>
                DOM — это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.
            </p>
        </div>
        <h3>CSS</h3>
        <div class="tabs__text" id="tabs-4" style="height: 0px;">
            <p>
                CSS — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
            </p>
        </div>
    </div>

var accordion = document.getElementById('accordion');
		accordion.addEventListener('click', change);
		function change(event) {
			var targ = event.target;
			if (targ.tagName !== 'H3') return; 
			if (targ.classList.contains('select')) {
				hideAll();
			} else {
				hideAll();
				targ.classList.add('select');
				showText(targ.nextElementSibling);
			}
		}
		function hideAll() {
			var h3El = accordion.querySelectorAll('h3');
			var divEl = accordion.querySelectorAll('div');
			for (var i = 0; i < h3El.length; i++) {
				h3El[i].classList.remove('select');
			}
			for (var i = 0; i < divEl.length; i++) {
				divEl[i].style.height = '0';
			}
		}
		function showText(textEl) {
			textEl.style.height = textEl.scrollHeight + 'px';
		}
	

		#accordion {
			margin: 10px 15%;
		}
		#accordion > h3 {
			color: blue;
			cursor: pointer;
			margin: 5px 0;
			padding: .5em .5em .5em .7em;
			border: 1px solid #ddd;
			border-radius: 5px;
			border: 1px solid #c5c5c5;
			background: #f6f6f6;
			font-weight: normal;
			color: #454545;
		}
		#accordion > h3.select {
			border: 1px solid #003eff;
			background: #007fff;
			font-weight: normal;
			color: #ffffff;
		}
		#accordion > div {
			height: 0;
			overflow: hidden;
			color: #333;
			padding-left: 15px;
			padding-right: 15px;
			transition: height .5s;
		}
		.tabs__text {
			font: 12px Arial;
			text-align: justify;
		}

 

http://jsfiddle.net/p3jdgoqs/