jQuery - slideDown and push icons

Question

I have a frontpage with a line of icons. The size of them are relative to the viewport. When i tap some of the icons i want to expand a div under the line of icons(iTunes-style) with some content. I use jQuery and have tried slideDown, with and without append the content to the icon-div, but it does not think of the rest of the line.

I can not separate each line with a div since number of icons on one line is not consistent.

I have tried this library, but due terrible documentation i didnt manage to make it work, any 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 a {
    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/

Answer 1

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();
   });
});