I am currently working on a project where I have a set of dynamically generated divs, each containing rows of content with three columns. Using jQuery toggle, I am trying to show and hide certain elements within the divs without affecting their layout. Here is an example of what I have:
<script type="text/javascript">
$(".trigger").click(function () {
var trigger = $(this);
$(this).next(".toggle").slideToggle();
});
</script>
<div id="toggleContainer">
<div>
<h3 class="trigger">Trigger 1</h3>
<ul class="toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
</div>
...
</div>
You can see the functionality in action in this JSFiddle. However, my challenge now is how to move the toggled content down vertically while keeping the rest of the rows intact. What I want to achieve is something like this:
A1 A2 A3
B1 B2 B3
C1 C2 C3
If we click on A1 and toggle its content, the new state should look like:
A1 A2 A3
A1toggle B2 B3
B1 C2 C3
C1