Ways to work around jQuery's new approach showing block or inline-block on slideDown() and slideUp()

When upgrading from jQuery 1.9 to jQuery 2.1.x, we found that our old way of making the element hidden initially, and then shown later via slideDown() would not reveal the element with our intended CSS "display" value (the one that we specified in our CSS file - not the "display: none" that we displayed on the element directly).

by jasonkylefrank

HTML

<span class="b hideInitiallyViaScript" style="display:none;">
    block
</span> 

<a href="#" class="toggle" data-for=".b">
    toggle an inline element w/block css
</a>

<br /><br />
<div class="ib hideInitiallyViaScript" style="display:none;">
    inline-block
</div> 

<a href="#" class="toggle" data-for=".ib">
  toggle a block element w/inline-block css
</a>

CSS

.b {
    display:block;
    background:red;
}

.ib {
    display: inline-block;
    background:blue;
    color: white;
}

JavaScript

$(".toggle").bind("click", function() {
    var selector = $(this).data('for');
    var $elementToToggle = $(selector);
    var isExpanded = $elementToToggle.data('isExpanded');     
    
    if(isExpanded) {   
        $elementToToggle.slideUp();
        $elementToToggle.data('isExpanded', false);
    }
    else {
        // Approach #1 - must use hide() elsewhere, 
        //  don't put "display:none" on the element
        //$elementToToggle.slideDown();
        // Approach #2 (can put "display:none" on element)
        $elementToToggle.slideDown().css('display', 'block');
        $elementToToggle.data('isExpanded', true);
    }    
});
// Need to use the hide method for jQuery to cache our 
//  display css property value.
// TOOD: determine if this approach leads to 
//   "Flash of unstyled content" on bigger pages.
var $elementsToHide = $('.hideInitiallyViaScript');
//$elementsToHide.hide();
//$elementsToHide.data('isExpanded', false);
$elementsToHide.data('isExpanded', true);