SOLVED: Tabbed Content Pages

[emilyshimell]

Hi all

OK I have a question regarding tabbed pages which I cannot find the answer to anywhere else on the forum (or online!).

My product pages on my website are made up of a summary area and then a number of tabbed areas. For example:

http://www.videocentric.co.uk/video-con ... cius.shtml

I have 2 scenarios created:

1. When the website was ported across to CMSMS, a "summary" template was created for us which would then take any children pages and create these as tabs. This is great due to the fact each page can have a different number of tabs/different names etc.

My problem with this is that for every page I want to create, I have to create around 5-6 pages, without being able to jump between each from one another, it is very time consuming and each tab then shows as a different page in my website search function (but without formatting which creates a huge confusion).

I used the <-- pageattribute: notsearchable --> in the template for the children pages to try resolve the search problem but the pages still show in the search.

2. I have just created a new template to make this much quicker to do - I have used a number of content blocks - but by doing this I am now restricting myself to the specific tab names I have set in my template, and then certain number of tabs I can have.

Questions:

1) For the first example, does anyone know why the notsearchable code didn't work?
2) Is there a way to create a template as in 2. but with the ability to specify each tab seperately (i.e. have a summary content block and then a dropdown/text box to specify how many tabs required, and then the right number of title and content blocks "appear"?
3) I know 2 sounds a bit far fetched, but in an ideal world this is what I would like... any other ideas would be most appreciated!

I look forward to hearing you comments or any ideas. I am quite a newbie at all of this stuff so please be nice

Emily


(please excuse any webdev/coding mess - it was ported across last year from an old dreamweaver/table format and has not been fixed yet due to time/lack of understanding...)

[Dr.CSS]

I do this with an UL LI in the top of a content block then add the content div of each tab below that so I can make as many tabs/contents as needed, no extra {content} blocks needed...

[manuel]

Hi emilyshimell,

For "2.":
You could add a single line content block above every regular content block and specify the titles in there.
You could also use smarty to check if a "title" content block has been filled out before showing the bigger content block that goes with it.

In your template:

Code: Select all

{capture assign="check_1"}{content block="title_1" label="Title" oneline="true"}{/capture}
{if isset($check_1) && $check_1 != ''}
{$check_1}<br>
{content block="content_1" label="Content"}
{/if}

You can copy this block of code for as many tabs as you would MAX. need (don't forget to change the numbers) and only if you fill out the title, the tab would become active.

add html/css to your liking

Greetings,
Manuel

[emilyshimell]

Thanks for both the answers guys! I will try them out and see which one works best and let you know the outcomes (or any other problems I come up against!)

Away for a couple of weeks now so will get back in few weeks time,

Thanks again, its much appreciated

Emily

[emilyshimell]

Brilliant I have managed to do it! Thanks guys, both of you really helped me in solving my problem (and i'm really chuffed cause this is one of the first things I have really got my head around regarding using smarty tags etc. and something I have been "putting up with" being wrong for a while!)



How I have finished up doing this (for others):

For css styling reasons, I have used <ul><li> for the tabs - this is how I was doing it originally in html but without dynamic content so each li was set with specific name. Now I have the following:

Code: Select all

 <ul id="tablist" class="shadetabs">
{capture assign="check_1"}{content block="tab_1" label="Title-tab1" oneline="true"}{/capture}
{if isset($check_1) && $check_1 != ''}
<li><a class="selected" rel="tab1" href="{anchor onlyhref='1'}">{$check_1}</a></li>{/if}

{capture assign="check_2"}{content block="tab_2" label="Title-tab2" oneline="true"}{/capture}
{if isset($check_2) && $check_2 != ''}
<li><a rel="tab2" href="{anchor onlyhref='1'}">{$check_2}</a></li>{/if}

{capture assign="check_3"}{content block="tab_3" label="Title-tab3" oneline="true"}{/capture}
{if isset($check_3) && $check_3 != ''}
<li><a rel="tab3" href="{anchor onlyhref='1'}">{$check_3}</a></li>{/if}

And so on for each of the 6 tabs I have initially set this template up for (that is currently what I expect the maximum number to be) - I have literally just copied the part from "{capture... to {/if} " and changed the numbers each time.

Below this I then have 6 of the following blocks, with a <div> around the whole lot for formatting reasons.

Code: Select all

{if isset($check_1) && $check_1 != ''}
<div id="tab1" class="tabcontent">
<div class="main-text">
  {content block="content_tab1" label="Content-tab1"}
</div>
</div>{/if}

This works exactly how I want it. up to 6 tabs are available and each tab title can be defined differently for each new page. If there is no title for the tab, it assumes there is no content in the related content box and skips it, moving onto the next.

Thanks for the help again Manuel and Dr CSS, and I hope I have helped someone else for the future!

[manuel]

Hi emilyshimell,

Thx for the feedback! Happy to hear you have been able to fix the issue!

Greetings,
Manuel