jQuery portfolio toggle messing with position

3 Views

i’ve a portfolio grid with images, with a jQuery toggle on each image.

When i click an image its look like this:
enter image description here

Read More

And i want to be like this:
enter image description here

I don’t want that my toggle info, push down my portfolio images, maybe I know why its happening, but still can’t solve it.

HTML: 

    <div id="blog">
    <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> 
    <div class="post" id="<?php the_ID(); ?>">
        <div class="thumbnail">
            <?php the_post_thumbnail( 'mainimg' ); ?>               
        </div>
        <div class="toggleSection">
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <h3>Posted in: <span><?php the_category(', ') ?>  </span>On: <span><?php the_time('l, F jS, Y') ?></span></h3>
            <p><?php the_content(); ?> </p>
        </div>
     <?php endwhile; ?>
     <?php endif; ?>
    </div>
</div>

CSS: 

    #blog {
position: relative;
height: 900px;
width: 905px;
margin: 0 auto;
margin-top: 10px;
clear: both;
    }

    .thumbnail {
z-index: 0;
float: left;
margin: 4px 3px 0px 3px;
cursor: pointer;
    }

    .toggleSection {
margin: 0 auto;
clear: both;
display: none;
background-color: pink;
height: 300px;
width: 900px;
    }

New into many things, please help 🙂

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. You could do the following :

    Get the index of the image clicked with .index()

    var currentIndex = $('.image').index(this);

    Then find the closest image that is a multiple of 5, and above the current index with :eq

      var nextFiveMultiple = (Math.floor((currentIndex+5) / 5) * 5)-1;

    Once you found it, you append the toggleSectioncontainer.

    $('.image:eq('+nextFiveMultiple+')').after('<div class="toggle"></div>');

    Here is a general jsfiddle if people are stumbling upon that thread:

    http://jsfiddle.net/rNUDm/2/

    Here is another edit of that jsfiddle, that will fit your specific code :

    http://jsfiddle.net/rNUDm/3/