Creating a bespoke Accordion in CMS
- Former user (Deleted)
This guide will show you how to create an Accordion with a different look at feel to our existing built in Accordion template.
It would be useful to understand some CSS and HTML before you attempt to create bespoke Content Types.
At this time we do not fully support bespoke CSS but understand that our customers would like the freedom to add their own stylesheets and templates to meet branding guidelines.
Guide Overview
In myday, there is particular order in which to carry out the steps when creating a new Content Type:
Create new stylesheet - this will allow you to change the colours, fonts and formatting of the Accordion
Create a new template - this will allow you to change the structure of the Accordion
Create a new Content Type - this will allow you to generate new Accordions based on the the bespoke design you create in steps 1 and 2
Step One - Create a stylesheet
Navigate to Content Management/Advanced/Stylesheets
Click on “Create New”
Enter a display name and logical name (all lowercase, no spaces) for your stylesheet .
Apply the style sheet code to the right hand window
Click on Save
Step Two - Create a template
Navigate to Content Management/Advanced/Templates
Click on “Create new”
Enter a Display Name, logical name and Description for your template
Select “Content” under Type
Select the style sheet you just created from the Stylesheet dropdown list
At this point you can either copy and paste an existing template or you can use the attached code which will create you a blank accordion
<div class="flex-xs-1 overflow-auto wrapper" ng-bind-html="page.getContent(page.model.data.properties.accordion)">
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="accordion"><h1>Item 1</h1></button>
<div class="panel">
<p>Your content for item 1.</p>
</div>
<button class="accordion"><h1>Item 2</h1></button>
<div class="panel">
<p>Your content for item 2.</p>
</div>
<button class="accordion"><h1>Item 3</h1></button>
<div class="panel">
<p>Your content for item 3.</p>
</div>
<button class="accordion"><h1>Item 4</h1></button>
<div class="panel">
<p>Your content for item 4.</p>
</div>
<button class="accordion"><h1>Item 5</h1></button>
<div class="panel">
<p>Your content for item 5.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
Click on Save
Step Three- Create a content type
Navigate to Content Management/Advanced/Content Types
Click on “Create New”
Enter a Display Name, logical name and Description for your content type
Tick the “Can be used as a root content type” tick box
Leave “Allowed Child Items” as default setting
Select the template you just created from the “Allowed Templates” drop down
Select the template you just created from the “Default template” dropdown list
Click Save
Step Four- Create content from your new content type
Navigate to “Content Management/Content”
Select your newly created content type from the list in the left hand panel
Click on “Create new FAQ Accordion”
Enter the Display Name, Path (lowercase, no spaces)
Make sure that the content type matches the one you just created
Select the template you created from the “Template” drop down list
Click “Save”
On the next screen click on “Save Changes” then “Save and Publish”
Click on “Preview Published page” to see your accordion
Editing your Accordion
The content of the accordion is created within the template itself, so you may want to build your template in notepad first and then paste into the template content.