Spoyla kwa JavaScript

Sasa tutajifunza jinsi ya kutengeneza spoyla. Kwa spoyla namaana vizuri vinavyoweza kufunguliwa, au kufungiwa kwa kutumia kiungo maalum.

Katika mfano ufuatao wa msimbo, aya yenye class spoiler ni spoyla, na kiungo chenye class toggle kinapaswa kubonyeza kuonyesha au kuficha hii spoyla:

<p>
	aya yenye maandishi
	<a href="" class="toggle">fungua</a>
</p>
<p class="spoiler">
	spoyla iliyofichika
</p>
<p>
	aya yenye maandishi
</p>

Katika maandishi, bila shaka kunaweza kuwa na spoyla nyingi na kila moja iwe na kiungo chake mwenyewe:

<p>
	aya yenye maandishi
</p>
<p>
	aya yenye maandishi
	<a href="" class="toggle">fungua spoyla 1</a>
</p>
<p class="spoiler">
	spoyla iliyofichika 1
</p>
<p>
	aya yenye maandishi
</p>
<p>
	aya yenye maandishi
	<a href="" class="toggle">fungua spoyla 2</a>
</p>
<p class="spoiler">
	spoyla iliyofichika 2
</p>
<p>
	aya yenye maandishi
</p>

Ni wazi kuwa kiungo cha kufungua na spoyla yenyewe inahitaji kuunganishwa kwa namna fulani. Unaweza kubuni chaguzi mbalimbali, lakini katika kesi hii mimi napendekeza kufanya kulingana na eneo: wacha tuseme, kiungo chenye class toggle kinafungua au kufunga kipengele chenye class spoiler, kilichowekwa mara baada ya mzazi wa kiungo hiki.

Acha spoyla kwa chaguo-msingi ifichike, na kama tunataka kuionyesha - tuwape class active. Tuandike msimbo unaofanana wa CSS:

.spoiler:not(.active) {
	display: none;
}

Iakilishe mwenyewe mifumo ya HTML na CSS iliyotolewa. Tekeleza utendaji ulioelezewa wa spoyla.