ISotope hippiefoods

With a stop click

by Warren Neily

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="iso-container">
  <div class="item">
  <h3 style="display-block; width:100%;">Coconut Chips</h3>
<div class="firstbox">
    
    <img src="http://pistolsandwhiskey.com/clienthost/coconot_chips.png" class="expand" />
       <button class="">details +/-</button>
      </div>


<p class="intro-text">Intro-text ut platea integer enim et aenean, ac amet ac ac pulvinar? Enim pellentesque! Ac porttitor porttitor pulvinar vel elementum sociis. Elementum elementum porta lundium pulvinar dolor etiam hac, aenean, ac mus nisi vut magna! Purus mattis, nec a, lundium sociis ut, in penatibus et parturient pulvinar? Duis tincidunt porttitor? Integer, nisi placerat? Ac lectus, etiam in arcu pulvinar.</p>
<p class="add-text">Additional Text ut platea integer enim et aenean, ac amet ac ac pulvinar? Enim pellentesque! Ac porttitor porttitor pulvinar vel elementum sociis. Elementum elementum porta lundium pulvinar dolor etiam hac, aenean, ac mus nisi vut magna! Purus mattis, nec a, lundium sociis ut, in penatibus et parturient pulvinar? Duis tincidunt porttitor? Integer, nisi placerat? Ac lectus, etiam in arcu pulvinar.</p>

<div class="additional-info"><div class="version">
    <img src="http://pistolsandwhiskey.com/clienthost/coconot_chips.png" />
       
    <p>Amet integer ut platea integer enim et aenean, ac amet ac ac pulvinar? Enim pellentesque! Ac porttitor porttitor pulvinar vel elementum sociis. Elementum elementum porta lundium pulvinar dolor etiam hac, aenean, ac mus nisi vut magna! Purus mattis, nec a, lundium sociis ut, in penatibus et parturient pulvinar? Duis tincidunt porttitor? Integer, nisi placerat? Ac lectus, etiam in arcu pulvinar.</p>
</div>
    <div class="version">
    <img src="http://pistolsandwhiskey.com/clienthost/coconot_chips.png" />
       
    <p>Amet integer ut platea integer enim et aenean, ac amet ac ac pulvinar? Enim pellentesque! Ac porttitor porttitor pulvinar vel...

CSS

.item {
  display:inline-block;
    padding:10px;
    box-sizing:border-box;
    width:20%;
    height:100px;
    background:hsl(90, 50%, 80%);
    margin:5px;
    color:slate;
    min-height:400px;
    min-width:350px;
    overflow:hidden;
}
.item img {
    max-width:100%;
}
.item p.add-text{
    display:hidden;
}
.item.selected p.intro-text, .item.selected p.add-text {
    display:block;
    box-sizing:border-box;
    float:left;
    width:70%;
    padding:20px;
}

.item.selected {
  width: 100%;
  height: auto;
  background:hsl(220, 20%, 70%);
  box-sizing:border-box;
  padding:0;
}

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */


.version {
    display:inline-block;
    vertical-align:text-top;
    box-sizing:border-box;
    width:33%;
    padding:20px;
    min-width:225px
    }

.firstbox {
    float:left;
}
.item.selected .firstbox {
    width:30%
}

.firstbox img, .firstbox button {
    float:left;
    }
.firstbox button {
    clear:both;
}
.additional-info {
    width:70%;
    float:left;
}
/* .firstbox...

JavaScript

var $container = $('#iso-container'),
      $items = $('.item');
  
  $container.isotope({
    itemSelector: '.item',
    masonry: {
      columnWidth: 60
    },
    getSortData : {
      selected : function( $item ){
        // sort by selected first, then by original order
        return ($item.hasClass('selected') ? -500 : 0 ) + $item.index();
      }
    },
    sortBy : 'selected'
      
  })
  
  $items.click(function(){
    console.log('ee')
    var $this = $(this);
    // don't proceed if already selected
    var $previousSelected = $('.selected');
    if ( !$this.hasClass('selected') ) {
      $this.addClass('selected');
    }
    
    $previousSelected.removeClass('selected');

    // update sortData for new items size
    $container
      .isotope( 'updateSortData', $this )
      .isotope( 'updateSortData', $previousSelected )
      .isotope();
    
  });


  $('.noclick').click(function(e){
    console.log('dd')
    e.stopPropagation();
  });