Google thumbnail with expanding

by Ravindra Athreya

HTML

<div class="preview">
        <p>Some preview text <a class="trigger" href="#">&hellip;</a></p>
      </div>
      
       <div class="entry">
        <div class="close_button">
          <a class="close" href="#">&times;</a>
        </div>
        <p>Some content text.</p>
      </div>
 


<div class="preview">
  <p>Some preview text <a class="trigger" href="#">&hellip;</a></p>
</div>

<div class="entry">
  <div class="close_button">
    <a class="close" href="#">&times;</a>
  </div>
  <p>Some content text.</p>
</div>

<div class="preview">
  <p>Some preview text <a class="trigger" href="#">&hellip;</a></p>
</div>

<div class="entry">
  <div class="close_button">
    <a class="close" href="#">&times;</a>
  </div>
  <p>Some content text.</p>
</div>

<div class="preview">
  <p>Some preview text <a class="trigger" href="#">&hellip;</a></p>
</div>

<div class="entry">
  <div class="close_button">
    <a class="close" href="#">&times;</a>
  </div>
  <p>Some content text.</p>
</div>

<div class="preview">
  <p>Some preview text <a class="trigger" href="#">&hellip;</a></p>
</div>

<div class="entry">
  <div class="close_button">
    <a class="close" href="#">&times;</a>
  </div>
  <p>Some content text.</p>
</div>

<div class="preview">
  <p>Some preview text <a class="trigger" href="#">&hellip;</a></p>
</div>

<div class="entry">
  <div class="close_button">
    <a class="close" href="#">&times;</a>
  </div>
  <p>Some content text.</p>
</div>

<div class="preview">
  <p>Some preview text <a class="trigger" href="#">&hellip;</a></p>
</div>

<div class="entry">
  <div class="close_button">
    <a class="close" href="#">&times;</a>
  </div>
  <p>Some content text.</p>
</div>

<div class="preview">
  <p>Some preview text <a class="trigger" href="#">&hellip;</a></p>
</div>

<div class="entry">
  <div class="close_button">
    <a class="close" href="#">&times;</a>
  </div>
  <p>Some content text.</p>
</div>

<div class="preview">
  <p>Some preview text <a class="trigger"...

CSS

.first {
  clear: left;
}

.preview {
  outline: 1px solid;
  width: 150px;
  padding: 5px;
  margin: 5px;
  float: left;
}

.entry {
  outline: 1px solid;
  width: 500px;
  padding: 5px;
  margin: 5px;
  float: left;
  clear: left;
}

.close_button {
  text-align: right;
}

JavaScript

$(function() {

  $(window).on('resize', function() {
    $('.openEntry').remove();
    $('.entry').hide();

    var startPosX = $('.preview:first').position().left;
    console.log(startPosX);
    $('.entry, .preview').removeClass("first last");
    $('.entry').each(function() {
      if ($(this).prev('.preview').position().left == startPosX) {
        $(this).prev('.preview').addClass("first");
        $(this).prevAll('.entry:first').addClass("last");
      }
    });
    $('.entry:last').addClass("last");
  });
  $(window).trigger('resize');

  $('.trigger').click(function() {
    $('.openEntry').slideUp(800);
    var preview = $(this).closest('.preview');
    preview.next('.entry').clone().addClass('openEntry').insertAfter(preview.nextAll('.last:first')).slideDown(800);
  });

  $('body').on('click', '.close', function() {
    $('.openEntry').slideUp(800).remove();
  });

});