Forum

Thread tagged as: Question

Tabbed content

Hi, I'm new to Perch. So far, so good!

I want to add some tabbed content to my site. I have made a 'tabs' content template with 'tab name' and 'tab content' fields.

I need my names to be pulled into the page separately to the content (in a ul). I can see this being useful for other things so I assume it is doable, I just can't see how.

I wondered if content_custom would help but I don't think it does. It might be I need to use js after the page has loaded but I'd prefer not if I can help it.

Any ideas?

Alan Pratt

Alan Pratt 0 points

  • 6 years ago
Ben Furfie

Ben Furfie 3 points
Registered Developer

What do you mean by pulled in separately? Are you talking about two fields displaying the same content independently of each other?

No, each field would have unique content. So you'd have a region called Tabs which uses a tabs content template and allows multiple items.

Item 1, Tab name = tab 1, content = content 1

Item 2, Tab name = tab 2, content = content 2

Item 3, Tab name = tab 3, content = content 3

etc.

I want it to display tab 1, tab 2 and tab 3 in a ul.

Then below that content 1, content 2 and content 3 in their own divs.

I hope that makes sense.

Rachel Andrew

Rachel Andrew 394 points
Perch Support

What does the HTML you have look like?

The output I want to achieve is something like:

<ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">Tab One</li>
    <li class="tab-link" data-tab="tab-2">Tab Two</li>
    <li class="tab-link" data-tab="tab-3">Tab Three</li>
</ul>

<div id="tab-1" class="tab-content current">
    Lorem ipsum...
</div>
 <div id="tab-2" class="tab-content">
    Lorem ipsum...
</div>
 <div id="tab-3" class="tab-content">
    Lorem ipsum...
</div>
Drew McLellan

Drew McLellan 2638 points
Perch Support

Ok, so you need two templates. One based on this:

<div id="tab-1" class="tab-content current">
    Lorem ipsum...
</div>

That will be your main template. Then create a second based on this:

<perch:before><ul class="tabs"></perch:before>
    <li class="tab-link current" data-tab="tab-1">Tab One</li>
<perch:after></ul></perch:after>

Use perch_content_custom() to display the region once with each of the two templates.

So I can use 2 templates for 1 region? How do I go about defining which part of the region goes into each template?

Drew McLellan

Drew McLellan 2638 points
Perch Support

One is always the master template used for editing.

You can redisplay that content through as many different versions of the template as you need to.