Using ExpressionEngine To Toggle Content Dynamically

I just wrapped an ExpressionEngine project that was a blast to work on.  We made extensive use of Playa, FF Matrix and structured the site with, well Structure.  The site just launched and as I was browsing through it today, I was reminded of a little trick I used to toggle content without using any javascript, just straight up ExpressionEngine.

Here is the scenario:  the client has a multi-language site with some pages having multiple translations.  Using FF Matrix we built the back end so the client could easily add copy for as many languages as they wanted.  We would then take that data and build the toggle buttons and populate the text on the page.  Initially I assumed we would just use a little javascript to toggle between the languages, but then the valid point was brought up about a user not being able to bookmark a specific translation of that page since we were doing all the showing/hiding with javascript.

Point taken.  So this is what I came up with.

{if office_lang}
   <p><a href="/office/{segment_2}">English</a></p>
   {office_lang}   
    <p><a href="/office/{segment_2}/{alt_lang}">{alt_lang}</a></p>    
   {/office_lang}  
{/if}
{if segment_3 == ''} 
   {office_intro} 
{if:else}
    {office_lang}  
      {if segment_3 == alt_lang}  
         {alt_content}  
      {/if}  
  {/office_lang} 
{/if}

Now I could easily toggle between the content as well as have a permanent URL structure so that users could bookmark a specific language on the page.  Here is the syntax broken down:

{if office_lang}
   <p><a href="/office/{segment_2}">English</a></p>
   {office_lang}   
    <p><a href="/office/{segment_2}/{alt_lang}">{alt_lang}</a></p>    
   {/office_lang}  
{/if}

Here we check to see if the page has multiple languages, then we loop through, first showing English as the default then each alternate language.

{if segment_3 == ''} 
   {office_intro} 
{if:else}
    {office_lang}  
      {if segment_3 == alt_lang}  
         {alt_content}  
      {/if}  
  {/office_lang} 
{/if}

Here is where the logic takes place. If segment 3 is blank, we are on the default language and therefore we show the default copy. However, if segment 3 is not blank, then we jump into the else statement. We match the value from segment 3 with the alternate language and display it’s copy.

That’s all there is to it. Ultimately we were able to generate a multi-language page with one template and permalinks for each language. If you’re not using ExpressionEngine, you should start.