Zendesk: Accordions for Copenhagen theme - Live example(https://zenultra.zendesk.com/)

Category.html

<!-- Add this code if you would like accordions on your Category Page -->

<div class="container-divider"></div>
<div class="container">
  <nav class="sub-nav">
    {{breadcrumbs}}
    {{search submit=false}}
  </nav>

  
  
  <div class="container">
  <div class="panel-group " id="accordion" role="tablist" aria-multiselectable="true">

     
      {{#isnt category.name ''}}      
      <div class="panel panel-red">
        <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#tab_{{category.id}}" id="headingOne">
          <h4 class="panel-title accordion-toggle">
            <a role="">
              <h3> {{category.name}}</h3>
            </a>
          </h4>
        </div>

        <div id="tab_{{category.id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body accordion-list">
              {{#each sections}}
              <section class="section">
                <a href="{{url}}">
                  <h3 class=home-section>{{name}}</h3></a>
                  <ul class="article-list promoted-articles">
                    {{#each articles}}
                    <li class="promoted-articles-item ">               
                      <a href="{{url}}">
                        {{#if promoted}}
                        <i class="icon-star" "promoted-icon"></i>
                        {{/if}}
                        {{title}}
                      </a>             
                    </li>
                    
                    {{/each}}
                  </ul>
                {{#if more_articles}}
                <a href="{{url}}" class="see-all-articles button-small" role="button">
                  {{t 'show_all_articles' count=article_count}}
                </a>
                {{/if}}
                </section>
                {{/each}}
            </div>
          </div>
        </div>
        {{/isnt}}
    </div>
  

document head.html

<!-- Latest compiled and minified CSS   -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

Home.html

<!-- Remove lines 8 - 20 and line 36 from the default code  -->

<div class="panel-group " id="accordion" role="tablist" aria-multiselectable="true">

      {{#each categories}}
      {{#isnt name ''}} <!-- if you need to hide sections -->
      <div class="panel panel-red">
        <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#tab_{{id}}" id="headingOne">
          <h4 class="panel-title accordion-toggle">
            <a role="">
              <h3> {{name}}</h3>
            </a>
          </h4>
        </div>

        <div id="tab_{{id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body accordion-list">
              {{#each sections}}
              <section class="section">
                <a href="{{url}}">
                  <h3 class=home-section>{{name}}</h3></a>
                  <ul class="article-list promoted-articles">
                    {{#each articles}}
                    <li class="promoted-articles-item ">               
                      <a href="{{url}}">
                        {{#if promoted}}
                        <i class="icon-star" "promoted-icon"></i>
                        {{/if}}
                        {{title}}
                      </a>             
                    </li>
                    
                    {{/each}}
                  </ul>
                {{#if more_articles}}
                <a href="{{url}}" class="see-all-articles button-small" role="button">
                  {{t 'show_all_articles' count=article_count}}
                </a>
                {{/if}}
                </section>
                {{/each}}
            </div>
          </div>
        </div>
        {{/isnt}}
        {{/each}}

    </div>

zendesk.css

/*Add at the very bottom of your CSS file*/

 .panel-heading.collapsed h4:after {
  /* symbol for "opening" panels */
   content:"\f078";
}
 .panel-heading h4:after {
   font-family:'FontAwesome';
   content:"\f077";
   float: right;
    color: inherit;
   margin-top: -35px;
   color: #388800;
   
}
.panel-title > a, .panel-title {
  color: #696969;
  text-decoration: none;
  font-size: 1.5em;
  cursor: pointer;
}

a.panel-heading {
    display: block;
}

.panel-red{
  border: 1px solid #388800 !important;
}

.panel-red .panel-title a{
  color: #388800;
  font-weight: bold;
	font-size: 1em;
}

.panel-group .panel{
  margin-bottom: 16px !important;
}

.icon-star::before {
  color: #388800;
  text-decoration: none;
}

i[class^="icon-"]:before {
	display: inline-block;
	text-decoration: none;
}

.panel .see-all-articles {
  background-color: #696969;
  color: rgb(255, 255, 255);
  text-decoration: none;
  border: none;
  
}

.panel .see-all-articles:hover {
  background-color: #388800;
  color: rgb(255, 255, 255);
  text-decoration: none;
  border: none;
}