Possible ways to implement an Accordion or Tabber rendering
January 15, 2017
0

Over the last couple of years in working with Sitecore and other CMS systems there are 2 types of content components/renderings which i have always found interesting to implement : The Accordion and the Tabber. Both types of components our structurely the same they just function differently.

Over the years I have seen several kinds of implementatinos of these components but there are 3 types I found most interesting:

  • The simple rich text implementation: This implementation offer a fairly static accordion or tabber where the only content in a panel is comprosed of the Rich Text Field
  • The Placeholder implementation: This implemenation offer a more versatile and better personaliseable component but at the same time can also make it harder for the content editor to work with. Every panel has its palceholder where you can add virtually any other rendering
  • The composite component implementation: This implementation offers the same functionalities as the “Placeholder implementation” but leverages the composite functionalities to make the component shareable and more easily content editable. The Sitecore Experience Accelerator actually uses this implementation for its tabber and accordion.

In this blog post I will go into the first two kinds of implementation whilst the third kind of implementation warrants its own blogpost because of the fact that it is more complicated to implement

Tools used in examples

The tools used in the examples in the blog post are:

  • Sitecore 8.2 Initial release
  • Zurb Foundation 6 as a front end framework

Terminology

To ensure optimal readability of this blog post i wont to introduce a couple of terms to clarify their meaning:

When I am talking around a tabber , I am talking around the following kind of component:

terminology-accordion.png

When i am talking around an Accordion, I am talking around the following kind of component:

terminology-tabber.png

When I am talking around a panel , I mean the following part of the tabber or accordion:

 terminology-panel.png

Simple rich text implementation

This implementation is easiest to implement and It is meant to create a simple to use accordion or tabber but with the limitation that it can only be rich text that can be added to the panel. This blog will talk around implementing an accordion but the exact same method can be used to create a tabber.

To start such an implementation we need to start with 2 templates :

  • Accordion: this can be an empty template because it is meant as a container
    Accordion-Template.png
  • Accordion panel: this template holds the rich text field and the panels title
    Simplae-accordion-panel-template.png

After creating both templates set the insert options of the standard values of the Accordion component to include the Accordion Panel:

insert-options-1.png

Now it is time create some code. For this component there is barely any logic so the code snippet below is enough of a view rendering to implement it:

@using Sitecore.Data.Items
@using Sitecore.Mvc
@model Sitecore.Mvc.Presentation.RenderingModel

@if (Sitecore.Context.PageMode.IsExperienceEditor && !Model.Item.HasChildren)
{
    <p>[No panels added please first add a panel]</p>
}

<ul class="accordion" data-accordion>
    @foreach (Item item in Model.Item.Children)
    {

        <li class="accordion-item @(Model.Item.Children.IndexOf(item) == 0? "is-active": "")" data-accordion-item>
            <a href="#" class="accordion-title">@Html.Sitecore().Field("title", item)</a>
            <div class="accordion-content" data-tab-content>
               @Html.Sitecore().Field("Content", item)
            </div>
        </li>
    }
</ul>


What we have done in the code snippet is that we create the Accordion container on line 14 and then loop through the children of the Accordion to generate the panels with content.

On line 5 we have implemented a check on children so that we can still show something in the Experience editor when there are no panels available.

Now add a view rendering for this rendering and be sure to add the insert item customer experience button:

Custom-experience-button-1.png

Now that we have our rendering ready we can insert it into a page. Make sure you set the datasource to an instance of the Accorion template. If everything went well you will now see the below:

Simple-no-panel.png

Now go ahead and add Panels to come to the result shown below:

Simple-with-panels.png

As you can see this was a very easy to implement accordion. it is very important to know that this limits your personalisation and content options alot whilst it also offers a lot of simplicity to the end user. If you want to optimize your personalisation options please contintue to the second kind of implementation “Placeholder implementation”

Placeholder implementation

The placeholder implementation is easiest to use when you also use the Dynamic placeholder plugin which can be found all around the web.the version i like the best is the nuget package that can be found here : “https://www.nuget.org/packages/DynamicPlaceholders.Mvc/”

The placeholder implementation is slightly harder to implement than the “Simple rich text ” implementation, this is because we want to enable all kinds of components inside the panels which also means allowing for multiple placeholders using dynamic placehodlers and adding placeholder settings for the placeholders.

We will start with again creating two templates:

  • Accordion: this can be an empty template because it is meant as a container
    Accordion-Template.png
  • Accordion panel: this template holds the panels title
    placehodler-accordion-panel.png

Same as before :  after creating both templates set the insert options of the standard values of the Accordion compnent to include the Accordion Panel:

insert-options-1.png

Now it is time create some code. For this component there is also barely any logic so the code snippet below is enough of a view rendering to implement it:

@using Sitecore.Data.Items
@using Sitecore.Mvc
@model Sitecore.Mvc.Presentation.RenderingModel

@if (Sitecore.Context.PageMode.IsExperienceEditor && !Model.Item.HasChildren)
{
<p>[No panels added please first add a panel]</p>
}

<ul class="accordion" data-accordion>
    @foreach (Item item in Model.Item.Children)
    {

    <li class="accordion-item @(Model.Item.Children.IndexOf(item) == 0? "is-active": "")" data-accordion-item>
        <a href="#" class="accordion-title">@Html.Sitecore().Field("title", item)</a>
        <div class="accordion-content" data-tab-content>
            @Html.Sitecore().Placeholder("Accordion-panel_"+ item.ID.Guid.ToString())
        </div>
    </li>
    }
</ul>





Whilst most of the code is the same as with the simple implementation the biggest difference is on line 17, where we add the palcehodler to the panel. On this line we use the regular placeholder function but we create our placeholder name with a guid after it. we do this to accomodate for the dynamic placeholder functionalities. Without it all our placeholders in every panel would have the same content and that is not what we want to have.

Again add a view rendering including a insert item button and then add a placeholder settings item with the name “Accordion-panel” and some components added to the allowed box:

placehodler-settings.png

Now you can add the component to the page and add a panel to get to the result below:

placehodler-1-panel.png

As you can see you now have a placeholder which you can fill with components. You can add content to the different panels and still personalise only part of the content within the accordion instead of always having to personalize the whole accordion:

placeholder-2-panels.png

The biggest disadvantages of this implementation is that it cannot be shared accross pages because the components inside of teh placehodlers are linked to a specific page and you get alot of “add here” buttons which can make live harder for a content editor:

placeholder-add-here.png

Both these issues I will address in a seperate blog post around the composite implementation. Which for me is the best all round implementation.

Summary

In this Blog post I have covered 2 of the 3 more common accordion/tabber implementations I have seen in the past couple of years. Keep in mind that there are always more ways to implement them but I feel these 3 are the best in regards to personalization, simplicity and manageability. I will cover the 3rd implementation method in a seperate blog post which I will publish in the coming two weeks.