Masonry-thumbs inside toggle

kpz4everFeb 24, 2017

Hi there!
I try to add a masonry-thumbs element inside a toggle. Text shows, but not the thumbs. Tried with the accordion, they work, but I would prefer to go for toggles. Any idea?

<div class="toggle toggle-bg">
	<div class="togglet"><i class="toggle-closed icon-ok-circle"></i><i class="toggle-open icon-remove-circle"></i>Header</div>
	<div class="togglec">
		<div class="col_full nobottommargin">
			<div class="masonry-thumbs col-6" data-lightbox="gallery">
				<a href="images/tanks_large/IMGP1920.jpg" data-lightbox="gallery-item" title="Image title
Copyright: xxx
Source: Archive"><img class="image_fade" src="images/tanks_small/IMGP1920.jpg" alt="Gallery Thumb 1"></a>
				<a href="images/tanks_large/IMGP1839.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/tanks_small/IMGP1839.jpg" alt="Gallery Thumb 2"></a>
				<a href="images/tanks_large/IMGP1903.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/tanks_small/IMGP1903.jpg" alt="Gallery Thumb 3"></a>
				<a href="images/tanks_large/IMGP1994.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/tanks_small/IMGP1994.jpg" alt="Gallery Thumb 4"></a>
				<a href="images/tanks_large/IMG_8329.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/tanks_small/IMG_8329.jpg" alt="Gallery Thumb 5"></a>
				<a href="images/tanks_large/IMG_8402.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/tanks_small/IMG_8402.jpg" alt="Gallery Thumb 6"></a>
  			</div>
		</div>										
	</div>
</div>

Thanks!
Stefan

SemiColonWebSTAFFFeb 28, 2017

Hello,

This is Definitely Possible. Please find the following code in the js/functions.js File inside the toggles: function() Function Block:

element.children('.togglet').click(function(){
	$(this).toggleClass('toggleta').next('.togglec').slideToggle(300);
	return true;
});

and replace it with:

element.children('.togglet').click(function(){
	$(this).toggleClass('toggleta').next('.togglec').slideToggle(300);
	setTimeout( function(){ SEMICOLON.widget.masonryThumbs(); }, 500 );
	return true;
});

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

kpz4everFeb 28, 2017

Fantastic, this really solved the issue.
Thank you!
Stefan