2017-12-23 28 views
0

アコーディオンを展開するボタン付きブートストラップアコーディオンのソリューションを探していますが、展開時にこのボタンを非表示にしたいと思います。ブートストラップボタン付きアコーディオン、展開時に非表示

アコーディオンの見出しは、アコーディオンの内側のテキストの冒頭に似ています。ボタンがあると、表示が乱れています。

アコーディオンが展開されているときにこのボタンを非表示にするにはどうすればいいですか?

ここでの問題は、タイトルをクリックしてアコーディオンを閉じるとボタンが消えたままになり、タイトルをもう一度クリックするとアコーディオンが拡張されますがタイトルも消えます。可能であれば、私はリンクとしてタイトルを保持したいと思います。

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

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

これは私がこれまで持っているものです:あなたがタイトルを非表示にした場合、あなたがアコーディオンを閉じますどのように

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

おかげ

答えて

0

?私はあなたのための解決策を作った。タイトルをクリックすると、タイトルが非表示になり、閉じるアイコンが表示されます。その後、閉じるアイコンをクリックすると、タイトルが表示され、アコーディオンは閉じられ、クローズアイコンは非表示になります。

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

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; 
} 

が更新フィドルをご確認ください
関連する問題