Question

So I can’t find myself an answer or explanation for a problem / question I have.

What I want to achieve is pretty complicated. For illustrating, here’s a JSFiddle – http://jsfiddle.net/GXaeL/3/

Could someone explain me, is this even possible to show the content of first row posts in one div below them. Same thing for the second row of posts etc.

I myself have had in mind that:

1. To combine somehow Tabs and Accordions?
2. This is purely an CSS positioning problem?
3. This is far more complicated than just accordions and CSS?

Since now, I have a PHP code, that creates a grid of posts. .posts are floated left and the row cleared when it hits 3.

<div class="post">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php if ( has_post_thumbnail() ) {
      the_post_thumbnail('thumbnail');
} else { ?>
      <img src="<?php bloginfo('template_directory'); ?>/fallback_image.jpg" alt="<?php the_title(); ?>" />
<?php } ?>
</a>
</div>
  <?php
     if($c == $bpr) :
  ?>
  <div class="clr"></div>

<?php
   $c = 0;
   endif;
?>

<?php
  $c++;
  endwhile;
?>
<div class="clr"></div>

May-be someone can push me to the right path on this?

Answer 1

I’m not exactly sure what your preferred implementation would be, so I’ll offer a couple options.

The first option is similar to you put together on jsFiddle, except I wrapped the “trigger” <div> tags in a <div> of their own and added a “content” <div> tag to the single “content” <div> tag that you were sliding down and up… easier explained in code:

    <div id="row1" class="item-info">
        <div class="item">item-1</div>      
        <div class="item">item-2</div>
        <div class="item">item-3</div>
        <div class="item">item-4</div>
    </div>
    <div id="contentRow1" class="item-info" style="display:none;">
        <div class="item-content">content div for item-1</div>      
        <div class="item-content">content div for item-2</div>
        <div class="item-content">content div for item-3</div>
        <div class="item-content">content div for item-4</div>
    </div>

For this solution, the jQuery code you were using wouldn’t need to change.

The second option is a bit more complex, but it allows each answer to be displayed individually rather than having to be displayed with all the other answers in the row.

Admittedly, there may be a more elegant, or jQuery UI-focused solution, but that’s fine… I’ll learn from that, too.

For now, I’ll offer the details of Option 2 on jsFiddle, which I forked from what you offered in your question.

Let me know if you have questions, and I hope this helps.