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

Hi Wes,

These are awesome, is it possible to change the colour and thickness of the accordion outlines or is this linked to the text colour?

Thanks

Hi Wes,

These are awesome, is it possible to change the colour and thickness of the accordion outlines or is this linked to the text colour?

Thanks

Just in case you're still curious...you'd want to override .panel-red, like so:
.panel-red {
border: 4px solid #b9a3e0 !important;
}

This looks great! Is there something that can be added for section & article pages so that it stays consistent with design?