Display Tabbed Content Using getPages and getResources

299 Posts

jisaac Reply #1, 12 years, 1 month ago

I am trying to overcome a challenge for a new site I am developing. For each product page I would like to create a document containing basic product information. Below the product information I wish to show a tab group consisting of related support documents and specifications. My plan was to automate the creation of the tabs allowing for flexibility for products where I may need additional tabs or where I may omit a tab by generating tabs from child resources.

The finished code should look like this:

                                 <div id="custom_tab" class="tabbable">
                                    <ul class="nav nav-tabs">
                                        <li class="active"><a href="#tab1" data-toggle="tab">Tab Button One</a></li>
                                        <li><a href="#tab2" data-toggle="tab">Tab Button Two</a></li>
                                        <li><a href="#tab3" data-toggle="tab">Tab Button Three</a></li>
                                    </ul>
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="tab1">
                                            <p>My content for tab 1</p>
                                        </div>
                                        <div class="tab-pane" id="tab2">
                                            <p>My content for tab 2</p>
                                        </div>
                                        <div class="tab-pane" id="tab3">
                                            <p>My content for tab 3</p>
                                        </div>
                                    </div>
                                </div>

I thought I could use a getPages call to generate the tabs.

                                 <div id="custom_tab" class="tabbable">
                                    <ul class="nav nav-tabs">
                                        [[!getResources? &parents=`[[*id]]` &tpl=`tabButtons`]]
                                    </ul>

Then I planned to use getPages to create tab content

                                    <div class="tab-content">
                                       [[!getPages? &parents=`[[*id]]` &tpl=`tabContent`]]
                                    </div>

[[$tabButtons]]

<li><a href="#tab[[+idx]]" data-toggle="tab">[[+pagetitle]]</a></li>

[[$tabContent]]

<div class="tab-pane active" id="tab[[+idx]]">
[[*content]]
</div>

And this is not working for me. How can I achieve this? And how can I add the active class to the first tab automatically?

This question has been answered by jisaac. See the first response.

[ed. note: jisaac last edited this post 12 years, 1 month ago.]

118 Posts

chris.dempsey78 Reply #2, 12 years, 1 month ago

And how can I add the active class to the first tab automatically?

Make sure idx starts at 0:

[[getResources?&idx=`0`]]

Then

<div class="tab-pane active" id="tab[[+idx]]">
[[*content]]
</div>

becomes

<div class="tab-pane[[+idx:is=`0`:then=`active`]]" id="tab[[+idx]]">
[[*content]]
</div>

299 Posts

jisaac Reply #3, 12 years, 1 month ago

Awesome. That solves my class issue.

However I am still not displaying the content from the child pages in the tabs. The tab titles are showing correctly just not the related content.

discuss.answer

299 Posts

jisaac Reply #4, 12 years, 1 month ago

Solution:

&includeContent=`1`

tabContent

<div class="tab-pane [[+idx:is=`0`:then=`active`]]" id="tab[[+idx]]">
[[+content]]
</div>

tabButton

<li class="[[+idx:is=`0`:then=`active`]]"><a href="#tab[[+idx]]" data-toggle="tab">[[+pagetitle]]</a></li>

tabs

                                <div id="custom_tab" class="tabbable">
                                    <ul class="nav nav-tabs">
                                        [[getResources? &parents=`[[*id]]` &showHidden=`1` &tpl=`tabButtons` &idx=`0`]]
                                    </ul>
                                    <div class="tab-content">
                                        [[getResources? &parents=`[[*id]]` &showHidden=`1` &tpl=`tabContent` &idx=`0` &includeContent=`1`]]
                                    </div><!-- end tab-content -->
                                </div><!-- end tabbable -->

Hopefully this will help others!

Answered Display Tabbed Content Using getPages and getResources