jquery - toggleClass display:none 初期ロードを display:none に設定

Question

選択したターゲットを .fold クラスで切り替えています。次のように表示されます: なし。

window.load で、ターゲットと addClass('fold') を選択して、ターゲットが最初は表示されないようにします。

ただし、トグルすると、CSS で指定されたマージン内に表示が収まりません。

最初にターゲットを非表示にしないと、toggleClass は機能します (元の表示規則に従います)。

また、addClass('fold')、次に toggleClass('unfold') も試みました。これにより、トグルが機能しなくなりました。

CSS:

.unfold{
display: block;
}
.fold {
    display: none;
}

$(function(){
$('.octothorpe').on({
    click:function(e){     
        e.preventDefault();
        var $pfold = $(this).closest('.octowrap').siblings('p');
        var $cfold = $(this).closest('.docs').siblings('.code');
        var $sector = $(this).closest('.section');
        var $h2 = $sector.nextUntil('.section:has(h2)').slice(0,-1);

        $pfold.toggleClass('fold');   
        $cfold.toggleClass('fold');   
        $h2.toggleClass('fold');

    }});
});

//on page load click all octothorpe
$(window).load( function() {
        var $pfold = $('.octothorpe').closest('.octowrap').siblings('p');
        var $cfold = $('.octothorpe').closest('.docs').siblings('.code');
        var $sector = $('.octothorpe').closest('.section');
        var $h2 = $sector.nextUntil('.section:has(h2)').slice(0,-1);

        $pfold.addClass('fold');        
        $cfold.addClass('fold');        
        $h2.addClass('fold');

});