iAmMitch92

Hi, I seem to be having a problem incorporating expandable divs within a grid of images set up through an <ul>. Basically what I want is for my 3x3 grid of images (a list of portfolio projects) once clicked to expand below, spanning 100% width of my wrapper div whilst other projects of the same row remain in place and only the rows below dropping to accommodate the depth of my expandable. After doing some research I was able to find code which allows for all of the above EXCEPT when activated all following images are knocked down to the next row as shown in attachments. ALSO when I apply this code to numerous <li> items each becomes clickable but will only expand/contract the first div. If it helps. here is my current code.. <li> <div class="toggler" onclick="toggleText('toToggle');"><a name="work"><img class="project_image" src="img/project.jpg" alt=""></a> <div id="toToggle"> This is the content to be toggled<br>This is the content to be toggled<br>This is the content to be toggled<br><br> </div> </div> </li> div.toggler { background: #e5e5e5; cursor:pointer; } div.toggler div { display:none; } #toToggle { float: left; width: 100%; margin: 0; background: #e5e5e5; } function toggleText(id) { var theText = document.getElementById(id); (theText.style.display=='block') ? theText.style.display='none' : theText.style.display='block' ; } If anyone could help or send me in the right direction that would be great!