How To Create Tabs?

Xenosis · 2019-03-14 11:57:19

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?

etc · 2019-03-14 18:52:19

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.

Xenosis · 2019-03-18 22:24:17

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

etc · 2019-03-19 09:14:15

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 :-)

uli · 2019-03-19 10:33:57

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.

Textpattern CMS

Textpattern CMS support forum

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

How To Create Tabs?

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

Re: How To Create Tabs?

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

Re: How To Create Tabs?

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

Re: How To Create Tabs?

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

Re: How To Create Tabs?

Xenosis wrote #317145:

Board footer