どうすればこの短い機能をJavaScriptで書くことができますか？

Question

私はjqueryを使ってこのコードを書いています。これは私にとっては馴染みのある言語です。しかし、私は正常にjQueryを使用して、これをJavaScriptに変換することができませんでした。どんな助けでも大歓迎です！

// Toggle Function 
$('.toggle').click(function(){ 
    // Switches the Icon 
    $(this).children('i').toggleClass('fa-pencil'); 
    // Switches the forms 
    $('.form').animate({ 
    height: "toggle", 
    'padding-top': 'toggle', 
    'padding-bottom': 'toggle', 
    opacity: "toggle" 
    }, "slow"); 
}); 

このコードは、ログインページのアイコンとフォームを切り替えました。

すべてのヒントは非常に参考になります。

Answer 1

ここでは、ネイティブJavaScriptに変換します。 CSSの ".show"定義を提供し、CSSアニメーションをいくつか定義して、必要なアニメーションを取得する必要があります。

const toggleElement = document.querySelector('.toggle'); 

toggleElement.addEventListener('click', function() { 
    const icons = this.querySelectorAll('i'); 
    icons.forEach(iconElement => iconElement.classList.toggle('fa-pencil')); 

    const form = document.querySelector('.form'); 
    form.classList.toggle('show'); 
}, false);