tabbed block

Wednesday 30 March 2011 11:19:44 am

hello

i would really like to create tabbed blocks on my pages. just simple blocks with tabbed menu where a click on a tab changes the visible content of the block and makes tab active. with or without page reloading, i don't care. i failed to find a ready solution in google and in project section on this webpage...

in which direction should i go?

any help will be much appreciated.

Thursday 31 March 2011 1:40:33 am

this is a page we have that does exactly what you need

of cource you also need to include the relevant javascript files to achieve the tab effect. Take a look at jquery tabs.

{*departmental resources*}<div class="top-right"> <h2>{$node.name}</h2> {def $contentitems = <span> </span>fetch('content','list',hash('parent_node_id',$node.node_id, <span>        </span> 'sort_by', array( priority, true ), <span>        </span> 'class_filter_type','include', <span>        </span> 'class_filter_array',array('department_content')))} {def $count = 1} {def $count2 = 1} <div id="tabs">  <ul>  {foreach $contentitems as $contentitem}   <li><a href="#fragment-{$count}"><span>{$contentitem.data_map.title.content}</span></a></li>   {set $count = inc($count)}  {/foreach}  </ul>  {foreach $contentitems as $contentitem}  <div id="fragment-{$count2}">   {include uri='design:edit_button.tpl' active_node=$contentitem}    {set $count2 = inc($count2)}   {$contentitem.data_map.content.content.output.output_text}  </div>  {/foreach} </div> </div><div class="top-left"> <h2>Resources</h2> {def $resources= <span> </span>fetch('content','list',hash('parent_node_id',$node.parent_node_id, <span>        </span> 'sort_by', array( priority, true ), <span>        </span> 'class_filter_type','include', <span>        </span> 'class_filter_array',array('department_resources')))} <ul> {foreach $resources as $resource} <li><a href={$resource.url|ezurl}>{$resource.name}</a></li> {/foreach} </ul> <div class="related-info">  <h2>Related Information</h2>  {def $parentnode=fetch( 'content', 'node', hash( 'node_id', $node.parent_node_id ) )}  {def $similar = fetch(ezfind, moreLikeThis,hash('query_type','text',  <span>           </span>  'query',$parentnode.data_map.description.content.output.output_text))}  <ul>  {foreach $similar.SearchResult as $result}  <li><a href={$result.url|ezurl()}>{$result.name}</a> ({$result.object.class_identifier})</li>  {/foreach}  </ul>  {*{$similar.SearchResult.0|attribute(show)}*} </div></div>{*departmental resources*}<div class="top-right"> <h2>{$node.name}</h2> {def $contentitems = <span> </span>fetch('content','list',hash('parent_node_id',$node.node_id, <span>        </span> 'sort_by', array( priority, true ), <span>        </span> 'class_filter_type','include', <span>        </span> 'class_filter_array',array('department_content')))} {def $count = 1} {def $count2 = 1} <div id="tabs">  <ul>  {foreach $contentitems as $contentitem}   <li><a href="#fragment-{$count}"><span>{$contentitem.data_map.title.content}</span></a></li>   {set $count = inc($count)}  {/foreach}  </ul>  {foreach $contentitems as $contentitem}  <div id="fragment-{$count2}">   {include uri='design:edit_button.tpl' active_node=$contentitem}    {set $count2 = inc($count2)}   {$contentitem.data_map.content.content.output.output_text}  </div>  {/foreach} </div> </div><div class="top-left"> <h2>Resources</h2> {def $resources= <span> </span>fetch('content','list',hash('parent_node_id',$node.parent_node_id, <span>        </span> 'sort_by', array( priority, true ), <span>        </span> 'class_filter_type','include', <span>        </span> 'class_filter_array',array('department_resources')))} <ul> {foreach $resources as $resource} <li><a href={$resource.url|ezurl}>{$resource.name}</a></li> {/foreach} </ul> <div class="related-info">  <h2>Related Information</h2>  {def $parentnode=fetch( 'content', 'node', hash( 'node_id', $node.parent_node_id ) )}  {def $similar = fetch(ezfind, moreLikeThis,hash('query_type','text',  <span>           </span>  'query',$parentnode.data_map.description.content.output.output_text))}  <ul>  {foreach $similar.SearchResult as $result}  <li><a href={$result.url|ezurl()}>{$result.name}</a> ({$result.object.class_identifier})</li>  {/foreach}  </ul>  {*{$similar.SearchResult.0|attribute(show)}*} </div></div>

Thursday 31 March 2011 8:01:00 am

The other thing about tabbed blocks remember to look at the viewcache ini as you will have to set up a view cache for the fetch otherwise the content will not update as required.