Back

Multiple loops in a container

Description

Several HTML frameworks require you to spit out your content in multiple chucks. For example, the tabs component in the Foundation CSS framework wants you to spit out the tab names as an unordered list. Then it wants you to spit out the content in individual panels. Seems straightforward; however, it can get a bit tricky when trying to do this in a container rather than a content pull. Here is a solution that worked for me.

Code

##CONTAINER BODY
#if(!$EDIT_MODE)
    #if($velocityCount == 1)
        #set($x = "<li class='tabs-title is-active'><a data-tabs-target='panel1' href='#panel-1'>$title</a></li>")
    #else
        #set($x = $x + "<li class='tabs-title><a data-tabs-target='panel1' href='#panel-1'>$title</a></li>")
    #end

    #if($velocityCount == 1)
        #set($y = "<div class='tabs-panel is-active' id='panel-$!{velocityCount}'><p>$!{content}</p></div>")
    #else
        #set($y = "<div class='tabs-panel' id='panel-$!{velocityCount}'><p>$!{content}</p></div>")
    #end
#else
   <sup>TAB TITLE:</sup>
   <p><strong>$!{title}</strong></p>
   <sup>TAB CONTENT:</sup>
   $!{content}
#end


##CONTAINER POST LOOP
<ul class="tabs" data-tabs id="$CONTAINER_NAME.replaceAll(' ', '')">
    $x
</ul>
<div class="tabs-content" data-tabs-content="$CONTAINER_NAME.replaceAll(' ', '')">
    $y
</div>

Topics

Have you created code you'd like to share with the dotCMS community?

Share your code Become a Contributor