I have set up a bootstrap tab option and have also implemented masonry js. The issue I am facing is that the boxes appear differently in each tab; one appearing smaller and the other larger. The masonry layout seems to be working correctly in the first tab, but not in the second.
Here is my HTML code:
<ul class="tabs" id="myTab">
<li class="tab-link current" data-tab="tab-1">First</li>
<li class="tab-link" data-tab="tab-2">Second</li>
</ul>
<div id="tab-1" class="tab-content current">
<div class="container">
<div class="gridnew">
<div class="grid-item">
<img src="Result-img-1.jpg" alt="">
<img src="Result-img-1.jpg" alt="">
<img src="Result-img-1.jpg" alt="">
</div>
</div>
</div>
</div
<div id="tab-2" class="tab-content current">
<div class="container">
<div class="gridnew">
<div class="grid-item">
<img src="Result-img-1.jpg" alt="">
<img src="Result-img-1.jpg" alt="">
<img src="Result-img-1.jpg" alt="">
</div>
</div>
</div>
</div
Below is my JS code:
<script type="text/javascript">
$('.gridnew').masonry({
itemSelector: '.grid-item'
});