jQueryを条件付きで切り替えてクラス名を追加する方法は？

Question

ボタンをクリックしたときに、クラス名を「in」に追加するか、または「in」が既に存在する場合は削除します。

"in"クラスを追加しますが、一度設定すると、再度クリックすると削除されません。

クラス「折りたたみ」に「イン」を追加して、再度クリックするとどうやって削除できますか？

$(document.getElementById("toggle-expand-sections")).click(function() { 
 
    if ($('#toggle-expand-sections').hasClass("enabled")) { 
 
     $('#description-form .collapse').addClass("in"); 
 
    } else { 
 
     $('#description-form .collapse').removeClass("in"); 
 
     $('#toggle-expand-sections').addClass("enabled"); 
 
    } 
 
    $('#toggle-expand-sections .toggle').toggle(); 
 
    });

#toggle-expand-sections { 
 
\t text-align: center; 
 
\t margin: 0 auto; 
 
\t padding: 2rem; 
 
} 
 

 
.collapse { 
 
\t display: none; 
 
} \t 
 

 
.in { 
 
\t display: block !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/js/font-awesome.min.js" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="toggle-expand-sections" class="btn btn-info"> 
 
    <i class="fa fa-toggle-off toggle" title="expand all sections"></i> 
 
    <i class="fa fa-toggle-on toggle" style="display: none" title="collapse all sections"></i> 
 
</button> 
 

 
<div class="collapse"> 
 
    <div class="subheader-description">foo</div> 
 
</div> 
 

 
<div class="collapse"> 
 
    <div class="subheader-description">bar</div> 
 
</div> 
 

 
<div class="collapse"> 
 
    <div class="subheader-description">baz</div> 
 
</div>

Answer 1

確か.toggle()方法を知っている...
説明しませんでした：表示またはマッチした要素を非表示にします。

コードがどのように減少するか（論理的または構文的なエラーの可能性）を確認してください。 jQueryののtoggleClassメソッドを使用していないのはなぜ

// Toggle "Expand/Collapse All Sections" Button 
 
$('#toggle-expand-sections').on('click', function() { 
 
    $(this).find('.toggle').toggle(); 
 
    $(".collapse").toggle(); 
 
}); 
 

 

 

 
/* 
 
    if ($('#toggle-expand-sections').hasClass("enabled")) { 
 
    $('#toggle-expand-sections').removeClass("enabled"); 
 
    $('.collapse').removeClass("in"); 
 
    } else { 
 
    $('.collapse').addClass("in"); 
 
    $('#toggle-expand-sections').addClass("enabled"); 
 
    } 
 
}); 
 
*/

#toggle-expand-sections { 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    padding: 2rem; 
 
} 
 

 
.collapse { 
 
    display: none; 
 
} 
 

 
/* 
 
.in { 
 
    display: block !important; 
 
} 
 
*/

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/js/font-awesome.min.js" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="toggle-expand-sections" class="btn btn-info"> 
 
    <i class="fa fa-toggle-off toggle" title="expand all sections"></i> 
 
    <i class="fa fa-toggle-on toggle" style="display: none" title="collapse all sections"></i> 
 
</button> 
 

 
<div class="collapse"> 
 
    <div class="subheader-description">foo</div> 
 
</div> 
 

 
<div class="collapse"> 
 
    <div class="subheader-description">bar</div> 
 
</div> 
 

 
<div class="collapse"> 
 
    <div class="subheader-description">baz</div> 
 
</div>

Answer 2

？

$(function() { 
    $("#yourbutton").on("click", function() { 
     $("#yourelement").toggleClass("in"); 
    )) 
});