When you the click Show All button it is supposed to show all the hidden contents and then finish. The rest of the website would then follow seperately. But when show all is clicked there is a lot of blank space left.
The height of the blank space corresponds to the height of all the tiles if I was not using Freetile plugin. When not using Freetile pluging it does not happen.
I guess Show More plugin does not recognise gaps that are omitted by Freetile plugin. I have been playing with the code for ages and have ran out of ideas.
Setup of Freetile plugin:
$(document).ready(function() {
$('#content').freetile({
animate : true,
elementDelay : 250,
gutter: 10,
});
});
Setup of Show More jQuery plugin:
$(document).ready(function() {
$('.showmore').showMore({
speedDown: 300,
speedUp: 300,
height: '1000px',
showText: '» Show All',
hideText: '» Close'
});
});
HTML
<div class="showmore">
<div id="content" class="social" style="font-size:11pt;margin:0px -6px 0 -6px;">
<div class="item mar col1" >
<div>
<a href="http://www.amazon.co.uk/gp/product/B00521L6Y6/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B00521L6Y6&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" src="http://ecx.images-amazon.com/images/I/41HHgiOb7%2BL._SX400_CR0,0,400,500_.jpg" alt="OSPREY HORNET 32 OS50352" /></a>
</div>
<div class="pad">
<p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B00521L6Y6/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B00521L6Y6&linkCode=as2&tag=4dese4chil-21">Osprey Hornet 32</a></p>
<h4>Backpack</h4>
<div class="dscr">
<ul><li>Lightweight and durable</li>
<li>25-30L Capacity</li>
<li>Hold all equipment
</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div>
<div class="qtyr">2</div>
</div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B000RZQI68/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B000RZQI68&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" src="http://ecx.images-amazon.com/images/I/71NjGJ7STYL._SX500_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B000RZQI68/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B000RZQI68&linkCode=as2&tag=4dese4chil-21">Coghlan's Featherweight Mirror</a></p>
<h4>Mirror</h4>
<div class="dscr">
<ul><li>Safety equipment</li>
<li>Attract attention in</li>
<li>emergency situations
</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B003UFL28Q/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B003UFL28Q&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" src="http://ecx.images-amazon.com/images/I/81o0-lh%2BYYL._SL500_CR17,60,420,210_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B003UFL28Q/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B003UFL28Q&linkCode=as2&tag=4dese4chil-21">Black Diamond Cosmo LED</a></p>
<h4>Headlamp</h4>
<div class="dscr">
<ul><li>Main and backup required</li>
<li>Bright enough to use at night</li>
<li>Long battery life
</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">4</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B002JOV608/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B002JOV608&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" src="http://ecx.images-amazon.com/images/I/410UQXfm9zL.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B002JOV608/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B002JOV608&linkCode=as2&tag=4dese4chil-21">Silva Companion 9 Compass</a></p>
<h4>Compass</h4>
<div class="dscr">
<ul><li>Any reliable model</li>
<li>Part of emergency gear</li>
</ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B000ZOX2SI/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B000ZOX2SI&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" border="0" src="http://ecx.images-amazon.com/images/I/21f8ms3bDLL._sx500_CR0,60,200,125_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B000ZOX2SI/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B000ZOX2SI&linkCode=as2&tag=4dese4chil-21">Safety Pins</a></p>
<h4>Safety Pins</h4>
<div class="dscr">
<ul><li>Larger size is better</li>
<li>At least 20 each</li>
<li>Attach things to clothes</li>
</ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">1</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B002CJNE0K/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B002CJNE0K&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" border="0" src="http://ecx.images-amazon.com/images/I/61Neht3qZ1L._SL500_CR0,20,480,430_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B002CJNE0K/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B002CJNE0K&linkCode=as2&tag=4dese4chil-21">Leatherman Freestyle Multi-Tool</a></p>
<h4>Knife/Multitool</h4>
<div class="dscr">
<ul><li>Good quality</li>
<li>Lightweight</li>
</ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B000WY2962/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B000WY2962&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" border="0" src="http://ecx.images-amazon.com/images/I/610124OOlXS._SL500_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B000RZQI68/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B000RZQI68&linkCode=as2&tag=4dese4chil-21">Adventure Medical Kits ThermoLite</a></p>
<h4>Survival Bivvy / Blanket</h4>
<div class="dscr">
<ul><li>Lightweight</li>
<li>Reflective material</li>
<li>Emergency survival gear</li>
</ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1">
<a href="http://www.amazon.co.uk/gp/product/B005GJL8AG/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B005GJL8AG&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" border="0" src="http://ecx.images-amazon.com/images/I/61gUUUdjQwL._SL500_CR115,15,260,470_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B005GJL8AG/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B005GJL8AG&linkCode=as2&tag=4dese4chil-21">Bushman Plus Dry Gel-75g</a></p>
<h4>Sunscreen</h4>
<div class="dscr">
<ul><li>High SPF</li>
<li>Waterproof, sweat proof, and non-greasy</li>
<li>Insect repellent</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">4</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B000MWDS8C/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B000MWDS8C&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;"border="0" src="http://ecx.images-amazon.com/images/I/61DmLSoRpXL._SL500_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B000MWDS8C/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B000MWDS8C&linkCode=as2&tag=4dese4chil-21">Dermatone Spot Protection Stick</a></p>
<h4>Lip Sunscreen</h4>
<div class="dscr">
<ul><li>High SPF</li>
<li>Waterproof, sweat proof, and non-greasy</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://uk.racingtheplanet.com/store/gear/footcare/footcare/blister-kit.html"><img style="width:100%;"border="0" src="/img/project/blisterkit.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://uk.racingtheplanet.com/store/gear/footcare/footcare/blister-kit.html">RacingThePlanet® Blister Kit</a></p>
<h4>Blister Kit</h4>
<div class="dscr">
<ul><li>Alcohol Wipes</li>
<li>Hypodermic Needles</li>
<li>Roll of paper tape</li>
<li>Roll of elastic tape</li>
<li>Second Skin or Compede pads</li>
</ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">4</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B004VNWHKS/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B004VNWHKS&linkCode=as2&tag=4dese4chil-21"><img style="width:70%;"border="0" src="
http://ecx.images-amazon.com/images/I/31J1-eZyvSL.CR150,25,195,460_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B004VNWHKS/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B004VNWHKS&linkCode=as2&tag=4dese4chil-21">Purell Hygenic Hand Sanitiser Gel</a></p>
<h4>Sanitiser</h4>
<div class="dscr">
<ul><li>Necessary kit</li>
<li>Alcohol gel</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">4</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B005G3WTZU/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B005G3WTZU&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" border="0" src="http://ecx.images-amazon.com/images/I/71ZOBDNORCL._SL500_CR60,20,470,390_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B005G3WTZU/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B005G3WTZU&linkCode=as2&tag=4dese4chil-21">Huggies Pure Baby Wipes - 10 x Packs of 64</a></p>
<h4>Toilet Paper/Baby-wipes</h4>
<div class="dscr">
<ul><li>Necessary!!</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B005XM5PSC/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B005XM5PSC&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" border="0" src="http://ecx.images-amazon.com/images/I/81nog6%2ByazL._SL500_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B005XM5PSC/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B005XM5PSC&linkCode=as2&tag=4dese4chil-21">Rolson Red LED Clip On Light</a></p>
<h4>Red Flashing Light</h4>
<div class="dscr">
<ul><li>In addition to other lights</li>
<li>Safety attachment</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B00E12MUZQ/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B00E12MUZQ&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;"border="0" src="http://ecx.images-amazon.com/images/I/61VePN%2B04VL._SL500_CR130,30,240,430_.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B00E12MUZQ/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B00E12MUZQ&linkCode=as2&tag=4dese4chil-21">Elastocrepe Cotton Crepe Bandage</a></p>
<h4>Compression Bandage</h4>
<div class="dscr">
<ul><li>Part of emergency equipment</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B0046FUSMK/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B0046FUSMK&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;"border="0" src="http://ecx.images-amazon.com/images/I/413dsb79QVL._SL500_CR30,0,340,400.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B0046FUSMK/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B0046FUSMK&linkCode=as2&tag=4dese4chil-21">Montane Featherlite Marathon Jacket</a></p>
<h4>Jacket</h4>
<div class="dscr">
<ul><li>Lightweight</li>
<li>Good weather protection</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="item mar col1" >
<a href="http://www.amazon.co.uk/gp/product/B00591HK62/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B00591HK62&linkCode=as2&tag=4dese4chil-21"><img style="width:100%;" border="0" src="http://ecx.images-amazon.com/images/I/41ZVnGK%2BmIL.jpg" ></a>
<div class="pad"><p style="font-size:12px;font-weight:bold;text-align:right;">e.g. <a href="http://www.amazon.co.uk/gp/product/B00591HK62/ref=as_li_ss_il?ie=UTF8&camp=1634&creative=19450&creativeASIN=B00591HK62&linkCode=as2&tag=4dese4chil-21">2XU Men's PWX Compression Baselayer</a></p>
<h4>Shorts</h4>
<div class="dscr">
<ul><li>Lightweight</li>
<li>Performance compression</li></ul>
</div>
<div class="qty"><div class="qtyc">Quantity</div><div class="qtyr">2</div></div>
<div ><a target="_blank" style="text-decoration: none;" class="buttongetwl" href="http://www.amazon.co.uk/gp/registry/wishlist/3B0B2RVKZIQRT/?ie=UTF8&camp=1634&creative=19450&linkCode=ur2&tag=4dese4chil-21">Send Us This via Amazon</a></div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
