Masonry layout does not adjust consistently

Question

Clicking each "more" button (which becomes "less") from left to right, the tiles don't reorganize correctly when clicking the button for the last tile of the first row until the window is resized (even by a tiny bit).

initLayout:true and resize:true are enabled by default but even when explicitly setting them again when toggle() runs did not solve the problem.

I initialize my grid both when the page loads and when toggle() runs:

jQuery('.grid').masonry({itemSelector: '.tex-entry'});

Ok so far...

Bottom tile should be on the next row, not covering expanded content. But upon resizing the window, the grid corrects itself.

jQuery(document).ready(function () {
    
    //initialize the grid
    jQuery('.grid').masonry({itemSelector: '.tex-entry'});
	
	    jQuery("button.tex_overlay_button").click(function () {
		
		var id = this.id;
        var toggle_num = parseInt(this.id.replace("tex-toggle-", ""), 10);

		jQuery("#tex-hide-default-" + toggle_num).toggle(200);
		
		//reinitialize the grid when any toggle button is clicked - not working consistently until/unless window is resized. 
		jQuery('.grid').masonry({itemSelector: '.tex-entry'});

		var content = jQuery("button#tex-toggle-" + toggle_num).html().toString();
        
        if (content === "more") {
            jQuery("button#tex-toggle-" + toggle_num).html("less");
        } else if (content === 'less') {
            jQuery("button#tex-toggle-" + toggle_num).html("more");
        }
    });

});

.tex_content_wrapper{width:90%;}
.tex-hide-default{display:none;}

.tex-image-main{width: 100%; height: 280px; }
.tex-entry{   
    display: inline-block;
    position: relative;
    width: 280px;
    margin-right: 10px;
    float:left;
    margin-bottom:8px;
}

h2.tex_overlay{
    position: absolute;
    top: 40px;
    width: 99.9%; 
}

button.tex_overlay_button{
    position: absolute;
    top: 245px;
    left: 1px;
    width: 60px;
    margin-left:110px;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>
<section id="primary" class="site-content"> <div id="content" role="main" class="tex_content_wrapper"> <div class="grid"> <div class="tex-entry" id="tex-entry-149" > <div class="tex-show-default" id="tex-show-default-149"> <img class="tex-image-main" id="tex-image-main-149" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Red_Rock_Canyon_National_Conservation_Area_-_Blue_Diamond%2C_Nevada.jpg"/> <h2 class="tex_overlay"><span><span class="tex-location-overlay-title" id="tex-location-overlay-title-149"><br>abc</span><br><br>(multiple locations)<br></span></h2> <button class="tex_overlay_button" id="tex-toggle-149">more</button> </div><div class="tex-hide-default" id="tex-hide-default-149"> <p class="tex-description" id="tex-description-149">Et corrupti occaecati tempore totam unde. Quia ut culpa voluptatem eum repudiandae commodi. Sint corporis velit sed.</p><div class="tex-term-list" id="tex-location-149"> <span class="tex-term-list-header">Location: </span> </div><div class="tex-term-list" id="tex-status-149"><span class="tex-term-list-header">Status: </span>Scientist Wanted</div><div class="tex-term-list" id="tex-category-149"><span class="tex-term-list-header">Category: </span><em>Learn More...</em></div></div></div><div class="tex-entry" id="tex-entry-66" > <div class="tex-show-default" id="tex-show-default-66"> <img class="tex-image-main" id="tex-image-main-66" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Red_Rock_Canyon_National_Conservation_Area_-_Blue_Diamond%2C_Nevada.jpg"/> <h2 class="tex_overlay"><span><br>def<br>-<br>ghi<br><span class="tex-location-overlay-title" id="tex-location-overlay-title-66"><br>jkl</span></span></h2> <button class="tex_overlay_button" id="tex-toggle-66">more</button> </div><div class="tex-hide-default" id="tex-hide-default-66"> <p class="tex-description" id="tex-description-66">Et corrupti occaecati tempore totam unde. Quia ut culpa voluptatem eum repudiandae commodi. Sint corporis velit sed.</p><div class="tex-term-list" id="tex-location-66"> <span class="tex-term-list-header">Location: </span> Washington, DC </div><div class="tex-term-list" id="tex-status-66"><span class="tex-term-list-header">Status: </span>Scientist Wanted</div><div class="tex-term-list" id="tex-tags-66"><span class="tex-term-list-header">Tags: </span><em>Learn More...</em></div></div></div><div class="tex-entry" id="tex-entry-60" > <div class="tex-show-default" id="tex-show-default-60"> <img class="tex-image-main" id="tex-image-main-60" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Red_Rock_Canyon_National_Conservation_Area_-_Blue_Diamond%2C_Nevada.jpg"> <h2 class="tex_overlay"><span><span class="tex-location-overlay-first" id="tex-location-overlay-first-60"><br>occaecati</span><br><span class="tex-location-overlay-title" id="tex-location-overlay-title-60"><br>Et corrupti occaecati </span></span></h2> <button class="tex_overlay_button" id="tex-toggle-60">more</button> </div><div class="tex-hide-default" id="tex-hide-default-60"> <div class="tex-term-list" id="tex-location-60"> <span class="tex-term-list-header">Location: </span> Kentucky </div><div class="tex-term-list" id="tex-status-60"><span class="tex-term-list-header">Status: </span>In-Progress</div><div class="tex-term-list" id="tex-category-60"><span class="tex-term-list-header">Category: </span><em>Learn More...</em></div></div></div><div class="tex-entry" id="tex-entry-57" > <div class="tex-show-default" id="tex-show-default-57"> <img class="tex-image-main" id="tex-image-main-57" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Red_Rock_Canyon_National_Conservation_Area_-_Blue_Diamond%2C_Nevada.jpg"/> <h2 class="tex_overlay"><span><span class="tex-location-overlay-first" id="tex-location-overlay-first-57"><br>asdfghjk</span></span></h2> <button class="tex_overlay_button" id="tex-toggle-57">more</button> </div><div class="tex-hide-default" id="tex-hide-default-57"> <div class="tex-term-list" id="tex-location-57"> <span class="tex-term-list-header">Location: </span> Colorado </div><div class="tex-term-list" id="tex-status-57"><span class="tex-term-list-header">Status: </span>In-Progress</div><div class="tex-term-list" id="tex-tags-57"><span class="tex-term-list-header">Tags: </span><em>Learn More...</em></div></div></div></div></div><br><br></section>

Answer 1

Moving the re-initialization of the grid to an anonymous function within toggle() fixes the issue:

jQuery("#tex-hide-default-" + toggle_num).toggle(200, function(){jQuery('.grid').masonry({itemSelector: '.tex-entry', containerStyle: null});});

Thanks to @xhadf layout / masonry - delayed layout adjustment - one click behind