HTML Spoiler script, wie den knopf nach dem drücken verschwinden lassen?

[dennes]

Moin

ich hab da mal eine frage und hoffe das mir hier jemand weiter helfen kann.

Es dreht sich um die erstellung eines spoilers,
zuvor hatte ich immer ein spoiler inkl js code den man im head bereich einfügen muss.
Jetzt habe ich es per button onclick gemacht da es direkt in wordpress inplementiert werdenuss und es mit einem kurzen einfachen script besser einzufügen geht

allerdings, sobald ich jetzt auf den spoiler klicke, bekomme ich einfach keine display:none möglichkeit für den gedrückten knopf, ich hoffe so sehr das ihr mir hier helfen könnt, leider finde ich keine passende befehlsliste dafür.
sprich, der knopf soll nach dem drücken verschwinden.

habe es per css mit (klasse):active probiert aber leider ohne erfolg.

hier ist mein aktueller inhalt und die funktion:

<style type="text/css">
.bt-spoiler-jobs {
font-size: 16px;
padding:3px 35px;
width:260px;
cursor: pointer;
background-color: #0072ff;
color: #fff;
display: block;
padding: 10px;
text-align: center;
text-transform: none;
border: none;
margin: 20px 0 0 0;
}

.bt-spoiler-jobs:hover {
font-size: 16px;
padding:3px 35px;
width:260px;
cursor: pointer;
background-color: #0000e2;
color: #fff;
display: block;
padding: 10px;
text-align: center;
text-transform: none;
}

#spoiler4jobs {
padding: 0 0 70px 0;
}
.angebot-gfx-pce {
width: 245px;
margin:0 20px 0 0;
}
.spoiler-toptext {
font-size: 23px;
margin:0 0 10px 0;
color: #000;
font-family: Maven Pro;
font-style: normal;
font-weight: normal;
}
.spoiler-toptext_light {
font-size: 16px;
margin:0 0 40px 0;
color: #777;
font-family: Maven Pro;
font-style: normal;
font-weight: normal;
}
.wpcf7-list-item first {
display: block;
float: left;
margin: 10px 20px 20px 0 !important;
width: 245px;
font-size: 20px !important;
color: #666;
}
.wpcf7-list-item {
display: block;
float: left;
margin: 10px 20px 20px 0 !important;
width: 245px;
font-size: 20px !important;
color: #666;
}
.wpcf7-list-item last {
display: block;
float: left;
margin: 10px 20px 20px 0 !important;
width: 245px;
font-size: 20px !important;
color: #666;
}
span.wpcf7-not-valid-tip {
margin: 0 0 30px 0 !important;
}

</style>

<div class="spoiler-toptext">Frage</div>
<div id="spoiler4jobs" style="display:none;">
<div class="spoiler-zusatzleiste">inhalt</div>

<div style="margin:20px 0; border-bottom:1px solid #ccc;padding:0 0 20px 0;">

inhalt

</div>

</div>
<button onclick="document.all.spoiler4jobs.style.display=''" class="bt-spoiler-jobs">bt hier</button>

wäre super super wenn mir hier jemand weiter helfen kann
LG und danke im voraus =)
dennes

 

[LSchmitt62]

Dein Spoiler funktioniert, nur du meinst du kannst ihn nachdem er ausgefahren ist nicht mehr einfahren? Oder wie verstehe ich es? Ich bin derzeit auf der Arbeit und kann es nicht ausprobieren.

 

[Teisi]

Sers,

da stimmt auch was nicht, machs so:

document.getElementById("myDIV").style.display = "none";

 

[dennes]

Danke für die antworten
kam leider erst jetzt dazu wieder hier rein zu schauen.

@LSchmitt62
der spoiler funktioniert, allerdings verschwindet der knopf nicht

@Teisi
danke für deine hilfe, habs grad ausprobiert aber dann macht er garnichts nicht mal mehr die spoiler funktion ist dann noch gegeben

Falls ihr mir doch weiter helfen könntet wäre es wirklich super

 

[Teisi]

Noch mal bitte:

Wo willst du drauf drücken und was soll dann verschwinden? Bzw. angezeigt werden?

https://jsfiddle.net/0yttb45x/

 

[dennes]

danke

es gibt ja nur ein blauen knopf, und wenn man drauf kommt erhält man weitere infos, dier knopf soll nach dem er gedrückt worde ist, verschwinden
das wars

 

[Teisi]

na dann gibst du dem button z. b. eine id und machst das selbe wie mit dem spoiler...
wie hier:
https://jsfiddle.net/0yttb45x/2/

 

[dennes]

Danke Teisi
du bist der beste

habs jetzt auch mit weiteren unterverschachtelungen hinbekomm und das in einer WP unterseite

DANKE DANKE nochma

lieben gruß aus hamburg =)

 

[Teisi]

Kein Ding.
Ist aber keine "saubere" Lösung würde ich mal behaupten.
Zum einen bin ich kein Freund von Inline-gerödel und zum anderen in Zeiten von CSS3 sollte/könnte man dies auch verwenden. Außerdem kann mans einfach animieren, like:

http://jsbin.com/IBumuMo/2/edit?html,css,js,output

Da ich aber nicht weiß wie dein Design aussieht lass ich das mal so im Raum stehen.

Grüße

 

[dennes]

hab schon ein klein übergang per css3 rein bekomm
echt super hilfe gewesen und danke