Forum

Thread tagged as: Question, Problem

Dynamic tabbed content on a page

Hi!

I have a example template for tabbed content but I would like to add and remove tabs and their content using the perch UI. I'm struggling to get the template(s) right. I've been searching the forum for any posts regarding this and the closest thing to a solution was that only the first tab worked and others got all messed up.

Here is the example I'm trying to transform into Perch templates:

<div class="tabs tabs-bb clearfix" id="tab-9">

                            <ul class="tab-nav clearfix">
                                <li><a href="#tabs-33"><i class="icon-home2 norightmargin"></i></a></li>
                                <li><a href="#tabs-34">Nunc tincidunt</a></li>
                                <li><a href="#tabs-35">Proin dolor</a></li>
                                <li class="hidden-phone"><a href="#tabs-36">Aenean lacinia</a></li>
                            </ul>

                            <div class="tab-container">

                                <div class="tab-content clearfix" id="tabs-33">
                                    Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
                                </div>
                                <div class="tab-content clearfix" id="tabs-34">
                                    Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
                                </div>
                                <div class="tab-content clearfix" id="tabs-35">
                                    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
                                    Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.
                                </div>
                                <div class="tab-content clearfix" id="tabs-36">
                                    Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
                                </div>

                            </div>

                        </div>

So how could I make that work so a user can add/remove tabs (and their content) via the Perch UI? How should I build the template(s)?

Thanks!

Tomi Tähti 0 points

3 years ago

Simon Clay 127 points

3 years ago

Hi Tomi,

There are a couple of ways you could do this.

1) You could split it into 2 templates and use a multi-item region and perch_content_custom to out put the tab list and then another perch_content_custom to output the tab content.

2) But a cool way of doing it with one template and just perch_content is to use a Repeater. Here's how the template would look.

tabs.html:

<div class="tabs tabs-bb clearfix" id="tab-9">  
    <ul class="tab-nav clearfix">
        <perch:repeater id="tabs" label="Tabs">
            <li><a href="#tabs-<perch:content id="perch_item_index" type="hidden" />"><perch:content id="tab_heading" type="text" label="Heading" required="true" title="true" /></a></li>

            <!--* this field is just to declare the field in the repeater so is suppressed *-->
            <perch:content id="text" type="textarea" label="Text" markdown="true" editor="simplemde" imagewidth="640" imageheight="480" suppress="true" />
        </perch:repeater>
    </ul>  
    <div class="tab-container">
        <perch:repeater id="tabs" label="Tabs">
            <div class="tab-content clearfix" id="tabs-<perch:content id="perch_item_index" type="hidden" />"> 
                <!--* this field is just to declare the heading in the repeater again so is suppressed *-->
                <perch:content id="tab_heading" type="text" label="Heading" required="true" title="true" suppress="true" />

                <!--* here is that text field from earlier *-->
                <perch:content id="text" type="textarea" label="Text" markdown="true" editor="simplemde" imagewidth="640" imageheight="480" />
            </div>
        </perch:repeater>
    </div>  
</div>

As you can see, it's necessary to declare all the fields each time you use the Repeater in the template, otherwise the editor won't see all the fields to fill in.

Now you can just use regular perch_content with the tabs.html template where you'd like the tabs to appear:

<?php perch_content('Tabs'); ?>

Tomi Tähti 0 points

3 years ago

Hi Simon!

Thank you very much for your post, it was most informative and helpful. It seems to work but when I go into the Perch UI ("backend") to add another item, it flashes the heading + body fields and then hides them so quickly, that I can't manage to write anything in them. So it's almost working, any idea what could cause that?

EDIT: Sorry my mistake, I didn't notice the big "ADD NEW ITEM" button, it's working now, thank you! :-)

Kind regards, Tomi

Simon Clay 127 points

3 years ago

Great! Glad it worked for you. :)