无法获得 codepon 手风琴 css - 只有代码可以工作

Question

我正在尝试从此处找到的 codepen 复制仅 css 的手风琴解决方案

但是，当我将代码复制到 jsfiddle 中时，它不起作用，我注意到 CSS 中的代码缺少 HTML 所指的代码。

(1) 有人了解如何访问此解决方案所需的完整代码吗？

(2) 加载时第一个部分总是折叠，有没有办法让一开始就全部关闭直到点击？

这是我能得到的：

HTML and CSS code below:

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
.panel-title > a:before {
    float: right !important;
    font-family: FontAwesome;
    content:"\f068";
    padding-right: 5px;
}
.panel-title > a.collapsed:before {
    float: right !important;
    content:"\f067";
}
.panel-title > a:hover, 
.panel-title > a:active, 
.panel-title > a:focus  {
    text-decoration:none;
}

<div class="container">
<div class="row">
<div class="col-md-3">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
             <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>

        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.le VHS.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
             <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>

        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
             <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>

        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
        </div>
    </div>
</div>
</div>
</div>
</div>

Answer 1

您需要单击代码笔 "CSS" 部分中的齿轮图标。在这里您会看到 "Bootstraps" Css 库已链接。这就是为什么 html 包含缺少 css 的类。

另外 bootstrap javascript 正在 JS 部分加载。在齿轮图标下。 所以您无论如何都不会通过使用此 method/code 获得 CSS 的唯一解决方案。

无法获得 codepon 手风琴 css - 只有代码可以工作

Can't get codepon accordion css-only code to work

css

codepen