Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
#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.
Can anyone help me with this?
Offline
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.
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
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 :-)
Offline
#5 2019-03-19 10:33:57
- uli
- Moderator
- From: Cologne
- Registered: 2006-08-15
- Posts: 4,304
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
Pages: 1