Автоматическое выравнивание div onclick между полями страницы

Question

Я пытаюсь создать список продуктов со скрытым div внутри. Когда я нажимаю на продукт, скрытый div должен открывать и показывать детали.

Как видно из fiddle, последний скрытый div, при нажатии, открывается за пределами полей.

JQuery, чтобы открыть скрытый DIV

function activateDropdown(entry_id) { 
    $(".box-dropdown").hide("slow"); 
    $("#box-dropdown-" + entry_id).show("slow"); 
} 

Есть ли способ, чтобы "выровнять" он уважая поле? (Сайт реагирует, поэтому уменьшение видового экрана зеленый дивы также может быть 3 или 2 ...)

ОБНОВЛЕНИЕ:

• Я хочу, чтобы скрытый квадрат при открытии должен быть 4х4. Это должно быть места над другими 3 div. Обновлено fiddle.

• Скрытый div должен быть открыт слева направо, но, очевидно, для последнего квадрата он должен быть справа налево.

Answer 1

working demo

2 изменений, что нужно сделать:

первых изменений, установить, как див отверстие справа налево должно вести себя DOM-мудрым, если его фиксированное погружение, я буду предлагаю использовать nth-child(4n) вид собственности для этого

#box-dropdown-4{ 
    right:0; 
} 

затем, поместите условие в JS для div s, который собирается открыть справа налево, опять же, если это 4-й div всегда, используйте что-то вроде entry_id%4 == 0, чтобы идентифицировать!

if (entry_id != 4) { 
     $("#box-dropdown-" + entry_id).show("slow"); 
    } else { 
     $("#box-dropdown-" + entry_id).show('slide', { 
      direction: 'right' /* decide slide direction, yeah, its that simple :) */ 
     }, 20000); 
    } 

наиболее имп Примечание: м не человек JS, так что анимация не является гладким :)

Answer 2

просто использовать этот CSS

#box .box-dropdown { 
      display: none; 
      width: 100%; 
      height: 100%; 
      background: #ffffff; 
      position: absolute; 
      z-index: 5; 

     } 

DEMO

изменилось:

width:100%; 
height:100%;