How to keep other divs from moving when using slidetoggle in responsive grid?

1 Views

I have a responsive grid in place, and on desktop/tablet there are 3 columns per row. Each div in said column has hidden content that can be expanded vertically when a button is clicked using slideToggle. I only want the div that is below it, that it touches, to move down. However, the entire row below it moves down.

Here is my fiddle & the JS I am using:
https://jsfiddle.net/6yz5okx3/

Read More
$( ".slidetoggle" ).click(function() {
  $(this).parent().parent().find( ".av_inner_wrapper" ).slideToggle();
});

If you click on the third item in the first row, you’ll see that the div expands but I only want it to push down the div directly underneath it, not the whole row. Any thoughts?

P.S. This is in WordPress, so all of the extra divs & such are put in there using the grid builder I’m using. I don’t have very much flexibility with them.

Any help is much appreciated!

Post Views: 1

Related posts

1 comment

  1. rnevius is correct with his comment that you cannot do that with your current system.

    You could try something like CSS Columns. However, CSS Column Support is spotty for anything other than the most current browser versions.

    The Below Snippet demonstrates the CSS Columns.

    $( ".slidetoggle" ).click(function() {
  $(this).parent().parent().find( ".av_inner_wrapper" ).slideToggle();
});
    .wrapper {
    width:100%;
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-width: 33%; /* Chrome, Safari, Opera */
    -moz-column-width: 33%; /* Firefox */
    column-width: 33%;
    -webkit-column-gap: 0; /* Chrome, Safari, Opera */
    -moz-column-gap: 0; /* Firefox */
    column-gap: 0;
}
.one-third {
    width:100%;
    padding:5px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-column-break-inside:avoid;
    -moz-column-break-inside:avoid;
    -o-column-break-inside:avoid;
    -ms-column-break-inside:avoid; column-break-inside:avoid;
    display:inline-block;
    overflow:auto;
}
.av_inner_wrapper {
    display:none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
	<div class="one-third">
		<div>
			<div>
				<img src="http://placehold.it/100x100" />
			</div>
		</div>
		<div>
			<h3>Heading 1</h3>
		</div>
		<div class="av_inner_wrapper">
			<section>
				<div>
					<p>Lorem ipsum dolor sit amit lorem ipsum dolor sit amit lorem ipsum dolor sit amit</p>
				</div>
			</section>
		</div>
		<div class="av_inner_wrapper">
			<div>
				<button href="#">CTA</button>
			</div>
		</div>
		<div class="av_icon_outer_wrapper">
			<button class="slidetoggle">Click to Slide</button>
		</div>
	</div>
	<div class="one-third">
		<div>
			<div>
				<img src="http://placehold.it/100x100" />
			</div>
		</div>
		<div>
			<h3>Heading 2</h3>
		</div>
		<div class="av_inner_wrapper">
			<section>
				<div>
					<p>Lorem ipsum dolor sit amit lorem ipsum dolor sit amit lorem ipsum dolor sit amit</p>
				</div>
			</section>
		</div>
		<div class="av_inner_wrapper">
			<div>
				<button href="#">CTA</button>
			</div>
		</div>
		<div class="av_icon_outer_wrapper">
			<button class="slidetoggle">Click to Slide</button>
		</div>
	</div>
	<div class="one-third">
		<div>
			<div>
				<img src="http://placehold.it/100x100" />
			</div>
		</div>
		<div>
			<h3>Heading 3</h3>
		</div>
		<div class="av_inner_wrapper">
			<section>
				<div>
					<p>Lorem ipsum dolor sit amit lorem ipsum dolor sit amit lorem ipsum dolor sit amit</p>
				</div>
			</section>
		</div>
		<div class="av_inner_wrapper">
			<div>
				<button href="#">CTA</button>
			</div>
		</div>
		<div class="av_icon_outer_wrapper">
			<button class="slidetoggle">Click to Slide</button>
		</div>
	</div>
	<div class="one-third">
		<div>
			<div>
				<img src="http://placehold.it/100x100" />
			</div>
		</div>
		<div>
			<h3>Heading 4</h3>
		</div>
		<div class="av_inner_wrapper">
			<section>
				<div>
					<p>Lorem ipsum dolor sit amit lorem ipsum dolor sit amit lorem ipsum dolor sit amit</p>
				</div>
			</section>
		</div>
		<div class="av_inner_wrapper">
			<div>
				<button href="#">CTA</button>
			</div>
		</div>
		<div class="av_icon_outer_wrapper">
			<button class="slidetoggle">Click to Slide</button>
		</div>
	</div>
	<div class="one-third">
		<div>
			<div>
				<img src="http://placehold.it/100x100" />
			</div>
		</div>
		<div>
			<h3>Heading 5</h3>
		</div>
		<div class="av_inner_wrapper">
			<section>
				<div>
					<p>Lorem ipsum dolor sit amit lorem ipsum dolor sit amit lorem ipsum dolor sit amit</p>
				</div>
			</section>
		</div>
		<div class="av_inner_wrapper">
			<div>
				<button href="#">CTA</button>
			</div>
		</div>
		<div class="av_icon_outer_wrapper">
			<button class="slidetoggle">Click to Slide</button>
		</div>
	</div>
	<div class="one-third">
		<div>
			<div>
				<img src="http://placehold.it/100x100" />
			</div>
		</div>
		<div>
			<h3>Heading 6</h3>
		</div>
		<div class="av_inner_wrapper">
			<section>
				<div>
					<p>Lorem ipsum dolor sit amit lorem ipsum dolor sit amit lorem ipsum dolor sit amit</p>
				</div>
			</section>
		</div>
		<div class="av_inner_wrapper">
			<div>
				<button href="#">CTA</button>
			</div>
		</div>
		<div class="av_icon_outer_wrapper">
			<button class="slidetoggle">Click to Slide</button>
		</div>
	</div>
</div>

Comments are closed.