Efektní často kladené otázky s posuvníky jQuery

Často kladené otázky mohou být super nudné, že? Nemusí být! Už jsem vám ukázal, jak vytvořit efektní často kladené otázky pomocí MooTools – zde je návod, jak vytvořit stejný efekt pomocí jQuery.

Zobrazit ukázku Zobrazit ukázku Elegant

HTML

<h3>This is question 1?</h3>
<div>
	<p>This is the answer to question #1.  Pellentesque habitant morbi....</p>
</div>
<h3>This is question 2?</h3>
<div>
	<p>This is the answer to question #2.  Pellentesque habitant morbi....</p>
</div>
<!-- more... -->

Jednoduše série obalů H3 a DIV v jednom kontejneru DIV. Jednoduché, jednoduché, jednoduché.

CSS

#faqs { position:relative; }
#faqs h3	{ cursor:pointer; }
#faqs h3.active	{ color:#d74646; }
#faqs div   { position:relative; }
#faqs div p	{ padding:0; margin-bottom:15px; }

Nic neobvyklého výše – naformátujte prvky tak, jako by zde nebyla komponenta jQuery.

JavaScript jQuery

$(document).ready(function() {
	$('#faqs h3').each(function() {
		var tis = $(this), state = false, answer = tis.next('div').slideUp();
		tis.click(function() {
			state = !state;
			answer.slideToggle(state);
			tis.toggleClass('active',state);
		});
	});
});

Začněte shromažďováním a opakováním všech prvků H3. Uchopte DIV, který následuje, zasuňte jej dovnitř a přidejte obslužné nástroje pro kliknutí, abyste je mohli zasunout a vysunout!

Elegantnější efekt

Výše uvedená metoda je dostupnější verzí. Pokud jsou pro vás prioritou efekty, následující varianty CSS a jQuery JavaScript zajistí elegantnější efekt tím, že zabrání úvodnímu vsunutí:

#faqs h3	{ cursor:pointer; }
#faqs h3.active	{ color:#d74646; }
#faqs div { height:0; overflow:hidden; position:relative; }
#faqs div p	{ padding:0; margin-bottom:15px; }
$(document).ready(function() {
	$('#faqs h3').each(function() {
		var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();
		tis.click(function() {
			state = !state;
			answer.slideToggle(state);
			tis.toggleClass('active',state);
		});
	});
});
Zobrazit ukázku Zobrazit ukázku Elegant

Tady to máš. Bavte se svými často kladenými dotazy!