Smarty / Tabbed Content / CSS

[cpansewicz]

Hi,

I have been using smarty to call pages into my tabbed content. How can I add a class to the <li> if it is active, and in the corresponding active tab panel?

Thank you.

<div>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
{assign var='count' value='1'}
{foreach from=$cgsimple->get_children($alias, true, $children) item='child'}
{if $child}
<li role="presentation">
<a href="#tab-{$count++}" aria-controls="home" role="tab" data-toggle="tab">
{$cgsimple->get_page_title($child.alias)}</a></li>
{/if}
{/foreach}
</ul>

<!-- Tab panes-->
<div class="tab-content">
{assign var='count' value='1'}
{foreach from=$cgsimple->get_children($alias, true, $children) item='child'}
{if $child}
<div role="tabpanel" class="tab-pane" id="tab-{$count++}">
{eval var=$cgsimple->get_page_content($child.alias)}
</div>
{/if}
{/foreach}
</div>

</div>

[Jeff]

Maybe something like:

Code: Select all

<a href="#tab-{$count++}" aria-controls="home" role="tab" data-toggle="tab" onclick="jQuery(this).parent().addClass('active');">
{$cgsimple->get_page_title($child.alias)}</a>

[cpansewicz]

Thank you! I will work with that. How would I add "active" to the class on this line:

<div role="tabpanel" class="tab-pane" id="tab-{$count++}">

Could I just insert onclick="jQuery(this).parent().addClass('active');" in the class?

[Jeff]

As long as the {$count} match.

Code: Select all

onclick="jQuery(this).parent().addClass('active');jQuery('#tab-{$count}').addClass('active');"

WARNING: {$count++} is a post addition, which means it displays its value and then adds 1, so if you use the above code at the end of the tag the value will not be the same.

You might want to use @iteration instead:

Code: Select all

{foreach from=$cgsimple->get_children($alias, true, $children) item='child'}
{if $child}
<li role="presentation">
<a href="#tab-{$child@iteration}" aria-controls="home" role="tab" data-toggle="tab" onclick="jQuery(this).parent().addClass('active');jQuery('#tab-{$child@iteration}').addClass('active');">
{$cgsimple->get_page_title($child.alias)}</a></li>
{/if}
{/foreach}

[velden]

get_children([$alias][,$showinactive][,$assign])

Return an array containing information about a pages children (if any)

Arguments:

[$alias] - (optional) The page alias to test. If no value is specified, the current page is used.
[$showinactive] - (optional) Wether inactive pages should be included in the result (defaults to false).
[$assign] - (optional) The name of a variable to assign the results to.

Don't call this method twice. In stead use the assigned variable (which I'd expect to be a string):

Code: Select all

{$cgsimple->get_children($alias, true, 'children')}
{if $children@count > 0}
  {foreach from=$children item='child'}
    <li role="presentation">
    <a href="#tab-{$child@iteration}" aria-controls="home" role="tab" data-toggle="tab" onclick="jQuery(this).parent().addClass('active');jQuery('#tab-{$child@iteration}').addClass('active');">
    {$cgsimple->get_page_title($child.alias)}</a></li>
  {/foreach}
  ...
  {*second loop, no need to call method again*}
  {foreach from=$children item='child'}
  ...
  {/foreach}
{/if}

[cpansewicz]

Thanks for putting those tips together. The code I've compiled from the tips is below. It generates a php error. I'm not sure what I have wrong though. Thank you for looking at this.

<!-- Nav tabs-->
<ul class="nav nav-tabs" role="tablist">
{$cgsimple->get_children($page_alias, true, 'children')}
{if $children@count > 0}
{foreach from=$children item='child'}
<li role="presentation">
<a href="#tab-{$child@iteration}" aria-controls="home" role="tab" data-toggle="tab" onclick="jQuery(this).parent().addClass('active');jQuery('#tab-{$child@iteration}').addClass('active');">
{$cgsimple->get_page_title($child.alias)}</a></li>
{/if}
{/foreach}
</ul>

<!-- Tab panes-->
<div class="tab-content">
{foreach from=$children item='child'}
<div role="tabpanel" class="tab-pane onclick="jQuery(this).parent().addClass('active')"" id="tab-{$count++}">
{eval var=$cgsimple->get_page_content($child.alias)}</div>
{/foreach}
</div>

[Jeff]

First you have the closing tags for the {foreach}, {if} and the <ul> in the incorrect order. Also mis-matching of " " and ' '.

Another tip would be to assign the content to a variable while you are looping through it the first time. (Pay close attention to the " " and ' ')

Code: Select all

{$tab_content = ''}
<ul class="nav nav-tabs" role="tablist">
{foreach from=$cgsimple->get_children($page_alias, true) item='child'}
<li role="presentation">
<a href="#tab-{$child@iteration}" aria-controls="home" role="tab" data-toggle="tab" onclick="jQuery(this).parent().addClass('active');jQuery('#tab-{$child@iteration}').addClass('active');">
{$cgsimple->get_page_title($child.alias)}</a></li>
{$tab_content = "{$tab_content}<div role='tabpanel' class='tab-pane' id='tab-{$child@iteration}'>{$cgsimple->get_page_content($child.alias)}</div>"}
{/foreach}
</ul>

<!-- Tab panes-->
<div class="tab-content">{$tab_content}</div>