Page 1 of 1
Smarty / Tabbed Content / CSS
Posted: Thu Aug 13, 2015 4:31 am
by 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>
Re: Smarty / Tabbed Content / CSS
Posted: Thu Aug 13, 2015 4:40 am
by 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>
Re: Smarty / Tabbed Content / CSS
Posted: Thu Aug 13, 2015 5:48 am
by 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?
Re: Smarty / Tabbed Content / CSS
Posted: Thu Aug 13, 2015 6:13 am
by 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}
Re: Smarty / Tabbed Content / CSS
Posted: Thu Aug 13, 2015 8:59 am
by 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}
Re: Smarty / Tabbed Content / CSS
Posted: Thu Aug 13, 2015 5:04 pm
by 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>
Re: Smarty / Tabbed Content / CSS
Posted: Thu Aug 13, 2015 11:58 pm
by 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>