Создайте функцию раскрытия jQuery для формы входа

Question

Я пытался заменить устаревший плагин на моем сайте WordPress на основе подписки, который до сих пор давал мне возможность вставлять мою форму входа на главную страницу с возможностью для формы внутри выпадающего меню, которое можно переключить, чтобы быть открытым и закрытым (и оно первоначально отображается закрытым, когда сайт загружается впервые).

Что я хочу: это фраза («Войти & Сведения об учетной записи»), которая при щелчке отображает выпадающий список, содержащий форму входа; и при повторном нажатии снова сворачивает/закрывает выпадающий список.

Я нашел следующее на форуме WordPress (https://wordpress.org/support/topic/add-custom-login-form-to-navigation?replies=3#post-8649379) и скорректировал его в соответствии с моими потребностями.

Я добавил в файл functions.php моего ребенка-темы:

jQuery(function() { 
    jQuery('#form-toggle').click(function() { 
     jQuery('#login-form').toggle(); 
    }); 
}); 

я добавил в домашнюю страницу:

<div id="form-toggle">Login & Account Details</div> 
<div id="login-form"> 
[login_form] 
</div> 

я добавил в пользовательских CSS:

#login-form { 
display: none; 
} 

#form-toggle { 
cursor: pointer; 
} 

Однако, когда я внедрил его, он отобразил «Войти & Сведения о счете» и форма входа была также видна по умолчанию. Когда нажата кнопка «Вход в систему &», раскрывающийся список сворачивается/закрывается, а при повторном нажатии падает.

Есть ли способ использовать приведенный выше код, но настройте его так, чтобы раскрывающееся меню не отображалось по умолчанию, но вместо этого появляется только после того, как вы нажмете на кнопку «Login &« Сведения об учетной записи »?

Или существует другой способ выполнения того, что я пытаюсь сделать? Я очень, очень новичок в jQuery. Спасибо вам за помощь!

Answer 1

Заменить

jQuery(function() { 
    jQuery('#form-toggle').click(function() { 
     jQuery('#login-form').toggle(); 
    }); 
}); 

С

jQuery(document).ready(function(){ 
     jQuery('#login-form').hide(); 
     jQuery('#form-toggle').click(function() { 
      jQuery('#login-form').toggle(); 
     }); 
    });