html - jQuery - slideDown and push icons -

html - jQuery - slideDown and push icons -

i have frontpage line of icons. size of them relative viewport. when tap of icons want expand div under line of icons(itunes-style) content. utilize jquery , have tried slidedown, , without append content icon-div, not think of rest of line.

i can not separate each line div since number of icons on 1 line not consistent.

i have tried library, due terrible documentation didnt manage create work, suggestions: http://thomaspark.me/project/expandingalbums/

some jquery:

$(document).ready(function(e){ $('#1').on('click',function(){ $('.dropdownwrap').slidetoggle(); });

html:

<div id="1" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div class="dropdownwrap"></div> <div id="2" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="3" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="5" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="6" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="7" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="8" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="9" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="10" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="11" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="12" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="13" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div>

css:

.app { float: left; width: 14.28%; padding: 1%; font-weight: 300; font-size: 14px; white-space:nowrap; position:relative; text-align:center; } .app { display:block; } .app img { max-width: 121px; width: 100%; } .dropdownwrap{ height:auto; float:left; margin:0px 0px 20px 0px; background-color:#434343; display:none; padding:20px; }

http://jsfiddle.net/jxkv5/

try this

http://jsfiddle.net/jxkv5/5/

<div id="1" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="2" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="3" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="5" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="6" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="7" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div class="boxwrapper"> <div class="dropdownwrap" for="1"></div> <div class="dropdownwrap" for="2"></div> <div class="dropdownwrap" for="3"></div> <div class="dropdownwrap" for="5"></div> <div class="dropdownwrap" for="6"></div> <div class="dropdownwrap" for="7"></div> </div> <div id="8" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="9" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="10" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="11" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="12" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div id="13" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">icon-label</a> </div> <div class="boxwrapper"> <div class="dropdownwrap" for="8"></div> <div class="dropdownwrap" for="9"></div> <div class="dropdownwrap" for="10"></div> <div class="dropdownwrap" for="11"></div> <div class="dropdownwrap" for="12"></div> <div class="dropdownwrap" for="13"></div> </div>

js

$(document).ready(function(e){ $('.app').on('click',function(){ var $this = $(this); var id = $this.attr('id'); if($this.hasclass('active')) return; $('.app').removeclass('active') $('.dropdownwrap').css('display','none'); $this.addclass('active'); $('[for="'+ id +'"]').slidetoggle(); }); });

jquery html css