Content Templates - Tabs for download

[NickyP]

Matrix Version: v5.3.4.2

Has anyone developed a tabbed content template where if, say you have five tabs but you want to remove the third tab and its contents?

Currently the example tabs template (for download) in the squiz community website has a dropdown which gives you the ability to create a maximum of 5 tabs. This adds/removes tabs at the end. For anyone considering using this template and for it to be viable for production it needs to be more flexibility to remove/hide any visible tab particularly in large organisations where content changes frequently.

Ok, looks like none one wants to add to this post but I have bee trying to do the following.

Fiddle Link

For some reason the same code which shows hides tabs doesn’t work in Matrix. In the meantime If I do find a solution I will post my final project for others to use

cheers
NickyP

[Bart]

Have you had a look at the Tabs template that is available from the Matrix site?
https://matrix.squiz.net/resources/templates/content-templates

You could use that as a starting point and expand from there?

[NickyP]

Thanks Bart, yes I did. I’ve crated accordions, tabs and other templates but never used them in production because I don’t think they’re intuative enough for the average user.

You’re going to get someone who wants to delete / remove (lets say you have 5 tabs) tab 2 and 3.

I just know users are going to ask how do I remove tab x y only

The issue is Matrix CCT doesn’t keep track of what tab was removed, if there are 5 tabs and you remove tab 2, Matrix only knows that one tab was removed but not exactly which one.

I’m trying to create another metadata field tab-1.active and so on as checkboxes - closing say tab 2 and 3 checks those checkboxes then keeps their state to checked so my theory is only show tabs that have a checkbox that is eqaul to false

Am I on the right track? I do believe the matrix community would benefit from using CC templates more so if the above was resolved

cherrs
N

[Edward]

We use dynamic tabs and accordions throughout our sites. The content lives as pages in a folder and the container template uses that as a source. Essentially its a stylised asset listing. To turn on/off content just means changing the status of the page.

[NickyP]

Thanks Edward - yeah that’s how we do it also.
The CCT is better though as it uses metadata to store content rather than having potentially hundreds even thousands of standard pages as assets within your site - makes it harder not index these pages and especially if you have to do an audit on your site i.e remapping to a new IA

Cheers
Nick

[NickyP]

If anyone is interested I would be happy to upload my latest version of CCT Tabs for anyone to either:

• Download and use the CCT for their website

• Download and make improvements to the CCT but must share their work for others to use as part of the squiz community

Let me know

Cheers
NickyP

[Bart]

Hey Nicky,
I’d love to check out your template you’ve made.
We might even be able to add it as a downloadable resource on https://matrix.squiz.net/resources/templates/content-templates with your permission?

[NickyP]

Version 1
Was completely revised by a senior squiz implementor to my original concept.

This version allows you to add and delete any tab. Adding a new tab is alway added at the end but you cannot reorder any of the tabs. Tabs are based on bootstrap but you can obviously change to whatever your preferred choice is.

export_v1.xml (105.9 KB)

Version 2

export_v2.xml (97.6 KB)

A max of 5 tabs - tab order set to 1 2 3 4 5 but you can reorder them once you have finished adding content as shown in the screenshot

I’m adding/sharing these in the hope that others can benefit and learn when implementing any CCT’s.

version 2 is a work in progress but I encourage others to download and make improvements (for those who have strong javascript skills) but must share their work here so we can all benefit.

Happy coding
NickyP

[Bart]

Awesome Nick, great work!