Bootstrap Akkordeon mit Knopf, verstecken, wenn erweitert

Question

Ich suche nach einer Lösung für ein Bootstrap Akkordeon mit einer Taste, um das Akkordeon zu erweitern, aber ich möchte diese Schaltfläche ausblenden, wenn es erweitert wird.

Meine Akkordeon Überschrift ist wie der Anfang des Textes innerhalb des Akkordeons, und wenn ich den Knopf dort habe, stört es die Ansicht.

Wie kann ich diese Schaltfläche ausblenden, wenn das Akkordeon erweitert wird, aber wieder sichtbar ist, wenn das Akkordeon ausgeblendet ist?

Das Problem hier ist, dass, wenn ich auf den Titel klicke, um das Akkordeon zu schließen, bleibt der Knopf verschwunden, und wenn ich den Titel erneut anklicke, wird das Akkordeon erweitert, aber der Titel wird auch verschwinden. Wenn möglich, möchte ich den Titel als Link behalten.

a[data-toggle='collapse'].collapsed { 
    visibility: visible; 
} 

a[data-toggle='collapse'] { 
    visibility: hidden; 
} 

Dies ist, was ich bisher:

https://jsfiddle.net/o93kwj80/2/

Dank

Answer 1

Wie werden Sie das Akkordeon schließen, wenn Sie den Titel verbergen? Ich habe eine Lösung für dich gefunden. Wenn Sie auf den Titel klicken, wird der Titel ausgeblendet und ein Schließen-Symbol wird angezeigt. Dann klicken Sie auf das Schließen-Symbol und der Titel wird angezeigt und das Akkordeon wird geschlossen und das Schließen-Symbol wird ausgeblendet.

a[data-toggle='collapse'].collapsed .title { 
    display: block; 
} 
a[data-toggle='collapse'].collapsed .close { 
    display: none; 
} 

a[data-toggle='collapse'] .title { 
    display: none; 
} 
a[data-toggle='collapse'] .close { 
    display: initial; 
} 
.close { 
    float: right; 
    color: red; 
} 

Bitte überprüfen Sie die aktualisierte Geige:

https://jsfiddle.net/o93kwj80/3/