Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2019-03-14 11:57:19

Xenosis
New Member
Registered: 2019-03-14
Posts: 2

How To Create Tabs?

Hello

Just started working with Textpattern and have a question about using tabs.

Is possible to create tabs based on categories(or sections), that displays the article thumbnails in the tabs content divs?

I’m trying to convert a static site that uses tabs like this.

This is how the code looks.

Can anyone help me with this?

Offline

#2 2019-03-14 18:52:19

etc
Developer
Registered: 2010-11-11
Posts: 3,132
Website

Re: How To Create Tabs?

Hello, welcome to the forum.

You can try this to get sections tabs:

<txp:hide process="2">
<ul class="nav nav-tabs" role="tablist">
    <txp:variable name="tablist" />
</ul>
</txp:hide>

<txp:section_list>
    <txp:variable name="counter" add />
    <txp:variable name="tablist" add>
        <li class="nav-item">
            <a href="javascript:openTab(<txp:variable name="counter" />);" class="tabLink" id="tabLink<txp:variable name="counter" />">
                <txp:section title />
            </a>
        </li>
    </txp:variable>
    <div class="tabContent" id="tabContent<txp:variable name="counter" />">
        <txp:article_custom section='<txp:section />' wraptag="p" break="br">
            <txp:permlink><txp:title /></txp:permlink>
        </txp:article_custom>
    </div>
</txp:section_list>

You’ll need to adjust the markup inside <txp:article_custom />, but this should get you started.


etc_[ query | search | pagination | date | tree | cache ]

Offline

#3 2019-03-18 22:24:17

Xenosis
New Member
Registered: 2019-03-14
Posts: 2

Re: How To Create Tabs?

Thank you very much that was a huge help, I even manged to change it to display using categories.

But i have some problems i’m unable to solve.

I need to make the first category in the tabs menu active when the page loads, so somehow I need to add class=“tabLinkActive” to the first tab item.

Also have a weird problem with the tab content moving up and down depending on which tab item i pick:
https://imgur.com/GX2fm6X

Last problem is excluding categories from the tabs menu, as you can see in the code i have tried with exclude=”“ but that did not work.

This is the code:
https://jpst.it/1EfGT

Offline

#4 2019-03-19 09:14:15

etc
Developer
Registered: 2010-11-11
Posts: 3,132
Website

Re: How To Create Tabs?

For the first category, <txp:if_first_category /> tag should help. To exclude categories try their name in lowercase. For moving tab content I dunno :-)


etc_[ query | search | pagination | date | tree | cache ]

Offline

#5 2019-03-19 10:33:57

uli
Moderator
From: Cologne
Registered: 2006-08-15
Posts: 4,191

Re: How To Create Tabs?

Xenosis wrote #317145:

Also have a weird problem with the tab content moving up and down depending on which tab item i pick

That should be due to improper opening/closing tags: you open 5 divs but close only 4. Beyond that you open HTML tags inside of txp containers and close them outside (or vice versa). Fix those and post your code here when you’ve further issues, it’s possible and you get help quicker; merely images can only be posted after a while of being a forum member here.


In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links

Offline

Board footer

Powered by FluxBB