Skip to content

Instantly share code, notes, and snippets.

@moderatorwes moderatorwes/Category.html
Last active Nov 22, 2019

Embed
What would you like to do?
Zendesk: Accordions for Copenhagen theme - Live example(https://zenultra.zendesk.com/)
<!-- 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>
<!-- 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">
<!-- 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>
/*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;
}
@stevehooper

This comment has been minimized.

Copy link

stevehooper commented Aug 31, 2017

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

@mpasteris

This comment has been minimized.

Copy link

mpasteris commented Jun 3, 2019

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

@hankified

This comment has been minimized.

Copy link

hankified commented Nov 22, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.