既存のクラスにJqueryを使用して動的に追加する

Question

Jqueryを既存のクラスに動的に追加したいが、ユーザーがボタンをクリックするまでHTMLエレメントに帰属させない。

私が試した：How to add property to existing classで提案されているように

$('.show-toggle').css("max-height", width * 0.5); 

をしかし、クラスが最初にアクティブになっていないので、私はそれが動作しないと思います。

HTML

<div id ="toggler"></div> 
<div id = "toogle" class="hide-toggle"> 

CSS（jQueryを使って）

.hide-toggle { 
display:none 
} 

.show-toggle { 
display : block; 
} 

JS

$('#toggler').click(function() { 

var width = $(window).width(); 
$('.show-toggle').css("max-height", width * 0.5); 
$("#toggle").toggleClass('hide-toggle').toggleClass('show-toggle'); 

}); 

Answer 1

（.cssファイルを入れて）.toggleClass（後）：

$(document).ready(function(){ 
    $("#toggler").click(function(){ 
    var width = $(window).width(); 
    $("#toggle").toggleClass("hide-toggle, show-toggle"); 
    $(".show-toggle").css("max-height", width*0.5); 
    }); 
}); 

#toggleに.show-toggleのクラスがあると、CSSの変更を実行できるようになります。クラス.SHOW-トグルを持つ要素がないときjQueryのクラス.SHOWトグル上の.css（）を実行することはできませんので

フィドル：https://jsfiddle.net/p15rcmn4/4/