Forum Mjukvara Programmering och digitalt skapande Tråd

jquery funktion. Ska visa/dölja frågornas svar

1
Skriv svar
Permalänk
Medlem
●

jquery funktion. Ska visa/dölja frågornas svar

Är ute efter en funktion likt den här:
http://ditec.se/fragor-svar.aspx

Någon som vet något färdigt exempel?
Tror dom byggt upp det med rent JS?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Det finns nog ett snyggare sätt än detta, men detta är det enklaste.

<html>

<script type="text/javascript">
$(document).ready(function() {
	$('#question-01').click(function() {
		$('#answer-01').toggle();
	});

	$('#question-02').click(function() {
		$('#answer-02').toggle();
	});
});
</script>

<body>



<a href="javascript:void(0)" id="question-01">
	Vad är detta för fråga?
</a>

<span id="answer-01">
	Det vet väl du?
</span>
<br>


<a href="javascript:void(0)" id="question-02">
	Vad är detta för fråga?
</a>

<span id="answer-02">
	Det vet väl du?
</span>



</body>
</html>
Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me /device:desktop

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Du kan använda klasser för att bara behöva ha en jQuery funktion:

$('.question_title').click( function() {
    $(this).next().slideToggle();
});
<p>
    <a href="#" class="question_title">Fråga</a>
    <span>Svar</span>
</p>

Du kan nu även lägga till hur många frågor du vill utan att behöva lägga till något i Javascriptet.
Vet dock inte riktigt om jag skulle använda en <a> tagg för frågan utan skulle nog tagit en <span> och stylat den med hover.

EDIT: Jag slängde in slideToggle i funktionen med så att svaret "åker" ner / upp istället för att bara hoppa fram, men du kan ju byta till bara toggle för att få den effekten.

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara