Menu icon Foundation
Foundation match height tabs with child equalizer.

Using foundation tabs with matched height to keep the panels the same height. One panel contains equalizer content, however the tabs fail to resize and the equalizers stacks. Essentially is tabs with nested equalizer content.

<div class="row">
	<div class="column">

		<ul id="example-tabs-2" class="tabs" data-responsive-accordion-tabs="tabs small-accordion medium-tabs" data-match-height="true">
			<li class="tabs-title is-active">
				<a href="#tab-1" aria-selected="true">Example 1</a>
			</li>
			<li class="tabs-title">
				<a href="#tab-2">Example 2</a>
			</li>
		</ul>

		<div class="tabs-content" data-tabs-content="example-tabs-2">

			<div class="tabs-panel is-active" id="tab-1" style="background-color: #e7e7e7;">
				<div class="row small-up-1 medium-up-2" >
					
					<div class="column" data-equalizer-watch>
						<h2>Example 1</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto quidem, fugit. Iste natus esse atque perspiciatis quis. Consequuntur beatae expedita aspernatur porro, voluptas iure ad ut quod deleniti maxime. Adipisci cupiditate suscipit, deleniti, distinctio quod aliquam obcaecati soluta numquam harum aut neque dolore fuga amet similique optio esse, ipsum, labore! Est quidem delectus quod mollitia error repudiandae fugit porro obcaecati, ut quas molestias ratione sunt dicta molestiae illum. Nostrum expedita voluptates voluptatum nesciunt excepturi facilis fuga culpa mollitia, error ipsa!</p>
					</div>
					<div class="column" data-equalizer-watch>
						<h2>Example 1</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto quidem, fugit. Iste natus esse atque perspiciatis quis. Consequuntur beatae expedita aspernatur porro, voluptas iure ad ut quod deleniti maxime. Adipisci cupiditate suscipit, deleniti, distinctio quod aliquam obcaecati soluta numquam harum aut neque dolore fuga amet similique optio esse, ipsum, labore! Est quidem delectus quod mollitia error repudiandae fugit porro obcaecati, ut quas molestias ratione sunt dicta molestiae illum. Nostrum expedita voluptates voluptatum nesciunt excepturi facilis fuga culpa mollitia, error ipsa!</p>
					</div>
					<div class="column" data-equalizer-watch>
						<h2>Example 1</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto quidem, fugit. Iste natus esse atque perspiciatis quis. Consequuntur beatae expedita aspernatur porro, voluptas iure ad ut quod deleniti maxime. Adipisci cupiditate suscipit, deleniti, distinctio quod aliquam obcaecati soluta numquam harum aut neque dolore fuga amet similique optio esse, ipsum, labore! Est quidem delectus quod mollitia error repudiandae fugit porro obcaecati, ut quas molestias ratione sunt dicta molestiae illum. Nostrum expedita voluptates voluptatum nesciunt excepturi facilis fuga culpa mollitia, error ipsa!</p>
					</div>
					<div class="column" data-equalizer-watch>
						<h2>Example 1</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto quidem, fugit. Iste natus esse atque perspiciatis quis. Consequuntur beatae expedita aspernatur porro, voluptas iure ad ut quod deleniti maxime. Adipisci cupiditate suscipit, deleniti, distinctio quod aliquam obcaecati soluta numquam harum aut neque dolore fuga amet similique optio esse, ipsum, labore! Est quidem delectus quod mollitia error repudiandae fugit porro obcaecati, ut quas molestias ratione sunt dicta molestiae illum. Nostrum expedita voluptates voluptatum nesciunt excepturi facilis fuga culpa mollitia, error ipsa!</p>
					</div>

				</div>
			</div>

			<div class="tabs-panel" id="tab-2" style="background-color: #e7e7e7;">
				<div class="row small-up-1 medium-up-2">
					<div class="column">
						<img src="http://placehold.it/600x500">
					</div>
					<div class="column">
						<h2>Example 2</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto quidem, fugit. Iste natus esse atque perspiciatis quis. Consequuntur beatae expedita aspernatur porro, voluptas iure ad ut quod deleniti maxime. Adipisci cupiditate suscipit, deleniti, distinctio quod aliquam obcaecati soluta numquam harum aut neque dolore fuga amet similique optio esse, ipsum, labore! Est quidem delectus quod mollitia error repudiandae fugit porro obcaecati, ut quas molestias ratione sunt dicta molestiae illum. Nostrum expedita voluptates voluptatum nesciunt excepturi facilis fuga culpa mollitia, error ipsa!</p>
					</div>
				</div>
			</div>

		</div>

	</div>
</div>

data-match-heighttabsEqualizerresponsive tabsBrokentabs with nested equalizernested equalizer

Using foundation tabs with matched height to keep the panels the same height. One panel contains equalizer content, however the tabs fail to resize and the equalizers stacks. Essentially is tabs with nested equalizer content.

<div class="row">
	<div class="column">

		<ul id="example-tabs-2" class="tabs" data-responsive-accordion-tabs="tabs small-accordion medium-tabs" data-match-height="true">
			<li class="tabs-title is-active">
				<a href="#tab-1" aria-selected="true">Example 1</a>
			</li>
			<li class="tabs-title">
				<a href="#tab-2">Example 2</a>
			</li>
		</ul>

		<div class="tabs-content" data-tabs-content="example-tabs-2">

			<div class="tabs-panel is-active" id="tab-1" style="background-color: #e7e7e7;">
				<div class="row small-up-1 medium-up-2" >
					
					<div class="column" data-equalizer-watch>
						<h2>Example 1</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto quidem, fugit. Iste natus esse atque perspiciatis quis. Consequuntur beatae expedita aspernatur porro, voluptas iure ad ut quod deleniti maxime. Adipisci cupiditate suscipit, deleniti, distinctio quod aliquam obcaecati soluta numquam harum aut neque dolore fuga amet similique optio esse, ipsum, labore! Est quidem delectus quod mollitia error repudiandae fugit porro obcaecati, ut quas molestias ratione sunt dicta molestiae illum. Nostrum expedita voluptates voluptatum nesciunt excepturi facilis fuga culpa mollitia, error ipsa!</p>
					</div>
					<div class="column" data-equalizer-watch>
						<h2>Example 1</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto quidem, fugit. Iste natus esse atque perspiciatis quis. Consequuntur beatae expedita aspernatur porro, voluptas iure ad ut quod deleniti maxime. Adipisci cupiditate suscipit, deleniti, distinctio quod aliquam obcaecati soluta numquam harum aut neque dolore fuga amet similique optio esse, ipsum, labore! Est quidem delectus quod mollitia error repudiandae fugit porro obcaecati, ut quas molestias ratione sunt dicta molestiae illum. Nostrum expedita voluptates voluptatum nesciunt excepturi facilis fuga culpa mollitia, error ipsa!</p>
					</div>
					<div class="column" data-equalizer-watch>
						<h2>Example 1</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto quidem, fugit. Iste natus esse atque perspiciatis quis. Consequuntur beatae expedita aspernatur porro, voluptas iure ad ut quod deleniti maxime. Adipisci cupiditate suscipit, deleniti, distinctio quod aliquam obcaecati soluta numquam harum aut neque dolore fuga amet similique optio esse, ipsum, labore! Est quidem delectus quod mollitia error repudiandae fugit porro obcaecati, ut quas molestias ratione sunt dicta molestiae illum. Nostrum expedita voluptates voluptatum nesciunt excepturi facilis fuga culpa mollitia, error ipsa!</p>
					</div>
					<div class="column" data-equalizer-watch>
						<h2>Example 1</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto quidem, fugit. Iste natus esse atque perspiciatis quis. Consequuntur beatae expedita aspernatur porro, voluptas iure ad ut quod deleniti maxime. Adipisci cupiditate suscipit, deleniti, distinctio quod aliquam obcaecati soluta numquam harum aut neque dolore fuga amet similique optio esse, ipsum, labore! Est quidem delectus quod mollitia error repudiandae fugit porro obcaecati, ut quas molestias ratione sunt dicta molestiae illum. Nostrum expedita voluptates voluptatum nesciunt excepturi facilis fuga culpa mollitia, error ipsa!</p>
					</div>

				</div>
			</div>

			<div class="tabs-panel" id="tab-2" style="background-color: #e7e7e7;">
				<div class="row small-up-1 medium-up-2">
					<div class="column">
						<img src="http://placehold.it/600x500">
					</div>
					<div class="column">
						<h2>Example 2</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto quidem, fugit. Iste natus esse atque perspiciatis quis. Consequuntur beatae expedita aspernatur porro, voluptas iure ad ut quod deleniti maxime. Adipisci cupiditate suscipit, deleniti, distinctio quod aliquam obcaecati soluta numquam harum aut neque dolore fuga amet similique optio esse, ipsum, labore! Est quidem delectus quod mollitia error repudiandae fugit porro obcaecati, ut quas molestias ratione sunt dicta molestiae illum. Nostrum expedita voluptates voluptatum nesciunt excepturi facilis fuga culpa mollitia, error ipsa!</p>
					</div>
				</div>
			</div>

		</div>

	</div>
</div>
Jonathan Davies almost 2 years ago

Some how this solution worked. No idea how, it just does.

http://foundation.zurb.com/forum/posts/52974-equalizer-in-responsive-tab-accordion