I want to list some company logos in a grid with 4 columns.

So I loop through the company nodes:

<xsl:foreach select="$company">
<div class="item">
  <img src="" alt="" />
</div>
</xsl:foreach>

I would like to place a div with details after each 4th item, but still with each company info.

So instead of this:
<div class="item">...</div>
<div class="details">...</div>
<div class="item">...</div>
<div class="details">...</div>
<div class="item">...</div>
<div class="details">...</div>
<div class="item">...</div>
<div class="details">...</div>

a want something like this:

<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="details">...</div>
<div class="details">...</div>
<div class="details">...</div>
<div class="details">...</div>
<div class="item">...</div>
....

How can I achieve this?

I want this setup to match the number of columns, so onclick on each company logo, I can expand a row below with to details of the company.

An example of the functionality you could click on the first logo in the upper left corner here: http://vindinggaardcenter.skaevt.com/

/Bjarne