The dropdown login form is malfunctioning on my Wordpress website

Question

The dropdown login form is malfunctioning on my Wordpress website

After reading various tutorials and guides online, I managed to set up a login screen. You can view the code in my jsfiddle: Jsfiddle. Unfortunately, I am facing issues with making the code function correctly. Being new to Jquery, I might have made a beginner mistake. The main problem is that upon clicking on 'login', the menu should drop down to display the login form. Any help or suggestions would be greatly appreciated. Thank you in advance.

$(document).ready(function(){
  $('#login-trigger').click(function(){
    $(this).next('#login-content').slideToggle();
    $(this).toggleClass('active');          

    if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
      else $(this).find('span').html('&#x25BC;')
    })
});

Here is an image of my functions.php:

jquery wordpress css

Answer 1

Answer №1

If you're working in WordPress, don't forget to include jQuery code similar to this:

function custom_script() {?>
    <script type="text/javascript">
    (function($) {
  $('#login-trigger').click(function(){
    $(this).next('#login-content').slideToggle();
    $(this).toggleClass('active');          

    if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
      else $(this).find('span').html('&#x25BC;')
    });
})(jQuery);
    </script>
<?php 
}
add_action( 'wp_head', 'head_script' );

Answer 2

If you're working in WordPress, don't forget to include jQuery code similar to this:

function custom_script() {?>
    <script type="text/javascript">
    (function($) {
  $('#login-trigger').click(function(){
    $(this).next('#login-content').slideToggle();
    $(this).toggleClass('active');          

    if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
      else $(this).find('span').html('&#x25BC;')
    });
})(jQuery);
    </script>
<?php 
}
add_action( 'wp_head', 'head_script' );

The dropdown login form is malfunctioning on my Wordpress website

Answer №1

Similar questions

jQuery Validate plugin - skip validation for empty fields

How can I display different divs based on a selected option?

How can we stop the jumping of images in the grid? Is there a way to eliminate the jump effect?

Compatible with pure vanilla JavaScript, but not jQuery

The information is not being stored in Excel despite the fact that the Excel document has been generated with a header

Having trouble getting the img file to show up in the img tag - the src URL is not updating

Automatically update the div every few seconds and pause when it has loaded successfully

What is the best way to adjust the specific scope of every element generated by ng-repeat within a directive?

Tips for retrieving the value of an input field using Material-UI

Widen Textbox Sideways

Generate a standard Wordpress menu containing all pages without the need to manually add each page in the menu editor

when input event occurs automatically upon returning to the page

Display or conceal toggle in ruby utilizing jQuery

Assistance needed in loading the gallery "galleria" using the .load function

Floating multiple block-level elements within an <li> tag in HTML allows for greater control over the layout and

Tips for customizing the blinking cursor in a textarea

Adjust the height of Revolution Slider on mobile devices using initialization

Using CSS nth-of-type on the same level of the DOM allows for specific

How to eliminate the bottom border in react-native-material-dropdown

Troubleshooting problems with dynamic elements and qTip