Easy EE Tip: Alternate Rows

Coming up with alternating rows on a webpage has gone through a lot of discussion in the past.  But I’m going to hit the topic just for those of you who use Expression Engine (like myself) and need a really easy way to alternate a class display.

Within the mechanics of EE, there’s a tag or variable to control everything that you see (as far as I’ve seen).  Which also means that there’s no hacking required.  A completely stock install can display exactly what you want it to, provided you give it proper direction.  Which is where people usually get confused; especially over the templating system, which is a debate I’ll save for another article.

For now, the command to swap between two results, or strings is:

where A is the first item displayed, and B is the second, with the third reverting back to A, and so on.

It’s interesting to note that you can leave A or B empty if you want the “walk like a one-legged pirate” sort of alternating, where you can just have a single class only show up on the even (or odd) rows.  You just need to keep the pipe “|” in place for it to see what position to add your string into, like this:

or

The only condition about switch is that it needs to be used within a weblog, comment, or trackback loop of some kind, where there will actually be a list of results.  But that shouldn’t be much concern anyway, since it seems primary used to alternate comment rows with a classname, like this (as a very basic example):

{exp:comment:entries weblog="{my_weblog}"}
  <div class="">
    <p></p>
    <p></p>
  </div>
{/exp:comment:entries}

For more fun, try adding a conditional to detect the site owner in combination with alternate rows:

class="comment"

Be sure to add spaces where needed, so that when it renders to the web browser, you don’t end up with classnames all bunched together.