JavaScript Anfängerfrage: Text Formatierung in einem "Spoiler"

[Bemko]

Hi,
ich ändere gerade die FAQs unserer Seite und aktuell sieht es so aus wie folgt:

Frage so und so
Antwort so und so
Sprich einfach fett die Frage und darunter die Antwort.

Das soll nun in Form von Spoilern geändert werden.

Ich habe bereits einen funktionierenden Spoiler.
Hier der Code:

<div class="pre-spoiler"><input onclick="if (this.parentNode.getElementsByTagName('div')[0].style.display != 'none') { this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Hier kommt die lange Frage hin?'; } else { this.parentNode.getElementsByTagName('div')[0].style.display = 'block'; this.value = 'Hier kommt die lange Frage hin?';}" type="button" name="button" value="Hier kommt die lange Frage hin?" />
<div class="spoiler" style="display: none;">Und hier kommt dann die Antwort!</div>

Der Funktioniert, sieht jedoch nicht wie gewünscht aus :/
Gibt es eine Möglichkeit, den Text innerhalb des Kastens (Sprich den Text:" Hier kommt die lange Frage hin?") zu formatieren?
z.B. fett/kursiv, größer geschrieben, Farbe ändern, Hintergrund des "Spoilers" zu ändern usw?

Den Antworttext kann ich formatieren wie ich möchte, aber die "Frage" ansich bekomme ich nicht hin :/

Ich habe gegooglet und leider nichts gefunden, womit ich klar komme.
Ich habe sogar einen Button Creator gefunden: http://www.bestcssbuttongenerator.com/#/ukYbiQ48U3
Da gibt es einige Buttons, die mir dann in Form eines CSS Codes ausgegeben werden. Leider weiß ich auch nicht, wie genau ich das auf meinen Spoiler anwenden soll..
Z.B. würde mir der Button ganz unten rechts (Rot mit weißer Schrift) ziemlich gut gefallen, hier der Code von der Seite.

<a href="#" class="myButton">red</a>

.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
box-shadow:inset 0px 1px 0px 0px #f29c93;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100));
background:-moz-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
background:-webkit-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
background:-o-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
background:-ms-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
filterrogidXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100',GradientType=0);
background-color:#fe1a00;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #d83526;
display:inline-block;
cursorointer;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #b23e35;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00));
background:-moz-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
background:-webkit-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
background:-o-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
background:-ms-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%);
filterrogidXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00',GradientType=0);
background-color:#ce0100;
}
.myButton:active {
position:relative;
top:1px;
}

Danke vielmals! )

 

[Daaron]

Dein Browser hat Entwickler-Werkzeuge, üblicherweise über F12 zu erreichen. Verwende sie, um dir anzugucken, welche HTML-Elemente dir fürs CSS überhaupt zur Verfügung stehen. Wenn selbige nicht reichen, schreib andere.

Ich würd das Ganze oben eh ohne JavaScript lösen. Das geht alles mit etwas CSS-Magie. Checkboxen, das ::selected - Pseudoattribut und der Selektor ~ (oder +, je nach Fall) lassen sooooo schön viele Sachen zu.