带按钮的引导手风琴，展开时隐藏答案

【问题标题】：Bootstrap Accordion with button, hide when expanded带按钮的引导手风琴，展开时隐藏
【发布时间】：2017-12-23 14:55:04
【问题描述】：

我正在寻找一个带有按钮的引导手风琴的解决方案来展开手风琴，但我想在展开时隐藏这个按钮。

我的手风琴标题就像手风琴内文本的开头，如果我在那里有按钮，它会干扰视图。

如何在手风琴展开时隐藏此按钮，但在折叠手风琴时再次可见？

这里的问题是，当我单击标题时，关闭手风琴，然后按钮仍然消失，如果我再次单击标题，手风琴会展开，但标题也会消失。如果可能的话，我想保留标题作为链接。

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

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

这是我目前所拥有的：

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

谢谢

【问题讨论】：

标签： html css twitter-bootstrap button bootstrap-accordion

【解决方案1】：

如果隐藏标题，你将如何关闭手风琴？我为你做了一个解决方案。如果您单击标题，标题将被隐藏并会显示一个关闭图标。然后点击关闭图标，标题将显示，手风琴将关闭，关闭图标将被隐藏。

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

请检查更新的小提琴：

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

【讨论】：