efficient jQuery dropdown login form

Initially, I came across this Simple and effective dropdown login box

I upgraded the sign-up box.

Now, I have both Login and Sign up dropdown boxes, but there is an issue.

When I click on Login (to activate) and then on Sign up (to activate the second box), the login box does not deactivate; instead, both boxes remain open and activated.

I need a solution where activating one of them deactivates the other.

Here is the jQuery code snippet:

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

    if ($(this).hasClass('active')) 
      $(this).find('span').html('▲')
    else 
      $(this).find('span').html('▼')
  });

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

    if ($(this).hasClass('active')) 
      $(this).find('span').html('▲')
    else 
      $(this).find('span').html('▼')
  });
});

Thank you and apologies for any language issues.

Here is an example demonstrating the current behavior: http://jsfiddle.net/ZcVCK/2/

Answer №1

Check out this Fiddle

/*----------------------------------------------------------------------------*/
    $('#login-trigger').click(function () {
        $('#registr-content').slideUp();
        if ($('#registr-content').hasClass('active')) {
            $('#registr-content').find('span').html('▲');
        } else {
            $('#registr-content').find('span').html('▼');
        }
        $(this).next('#login-content').slideToggle();
        $(this).toggleClass('active');

        if ($(this).hasClass('active')) {
            $(this).find('span').html('▲');
        } else {
            $(this).find('span').html('▼');
        }
    });
    /*----------------------------------------------------------------------------*/
    $('#registr-trigger').click(function () {

        if ($('#login-content').hasClass('active')) {
            $('#login-content').find('span').html('▲');
        } else {
            $('#login-content').find('span').html('▼');
        }
        $('#login-content').slideUp();

        $(this).next('#registr-content').slideToggle();
        $(this).toggleClass('active');

        if ($(this).hasClass('active')) {
            $(this).find('span').html('▲');
        } else {
            $(this).find('span').html('▼');
        }
    });

Answer №2

It is important to verify if the other box is currently open.

$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active'); 
if($('#registr-trigger').hasClass('active')){
  $('#registr-trigger').slideToggle();
  $('#registr-trigger').toggleClass('active'); 
}});

Similar piece of code applies to #registr-trigger

Answer №3

Give this a shot:

$(document).ready(function(){
    $('#login-trigger').click(function(){
    $('#registr-trigger:visible').hide(); // **Brand new code snippet**
    $(this).next('#login-content').slideToggle();
    $(this).toggleClass('active');                  

    if ($(this).hasClass('active')) $(this).find('span').html('▲')
        else $(this).find('span').html('▼')
    });
    /*----------------------------------------------------------------------------*/
    $('#registr-trigger').click(function(){
    $('#login-trigger:visible').hide(); // **Brand new code snippet**
    $(this).next('#registr-content').slideToggle();
    $(this).toggleClass('active');                  

    if ($(this).hasClass('active')) $(this).find('span').html('▲')
        else $(this).find('span').html('▼')
    });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Center the div element with a small left margin

In the process of developing a website, I am faced with the challenge of creating a navigation bar at the top. This navigation bar is designed to have a logo in the top left corner and a toolbar centered within the window. The logo is implemented using an ...

Guide to configuring a Carousel with a 100% width

https://i.sstatic.net/zYpbd.pngI'm having trouble making my carousel responsive on my webpage. I tried setting its width to 100% within a class, but it doesn't seem to be working. How can I ensure that the carousel's width is 100% and still ...

Issue with Ajax call not triggering the Controller Action in MVC

I am encountering an issue with making an ajax call to the controller action method that returns a json object. In addition, I need to pass the integer CheckID to the method. Any assistance would be greatly appreciated. Thank you in advance! ***View*** ...

Customizing the appearance of a data field in Angular-ui-grid: Tips and tricks

In my quest through the angular-ui-grid documentation, I have been unable to locate any mention of "CellFormatters" which were utilized in a previous project a few years back. The purpose of the "CellFormatters" was to present a text representation of the ...

Utilizing array.filter() to retrieve objects with values containing specified keywords

In my node.js project, I have an array named products that is structured as follows: [ { product_id: 'adidas-training-shoes', title: 'Adidas Training Shoes', description: 'description', brand: 'brand&a ...

Combining HTML elements to form a fresh element

Consider the following code snippet for selecting and displaying a date: <div> <input type="text" class="txt txtDate"/> <input type="button" class="btn btnDate" value="Select from Calendar&q ...

Encountering errors when importing a JS file into a Vue project

I recently attempted to utilize the plugin https://www.npmjs.com/package/mobius1-selectr After running npm install mobius1-selectr I proceeded to import it into my main.js import 'mobius1-selectr/dist/selectr.min.css'; import 'mobius1-sel ...

Retrieve a DOCX file via AJAX response

I am encountering an issue with a Django function that returns a file: ... return FileResponse(open('demo.docx', 'rb')) I am using ajax to fetch it on the client side. Now, I need to download it on the client side. This is the code I a ...

Increase the size of an image when the mouse hovers over it within a

Recently, I came across this tutorial on creating a zoom in effect for images when hovering over them with the mouse. The tutorial doesn't use tables to display the images, so I was wondering if I could achieve the same effect by placing the images in ...

Using a forEach loop within the RequestAnimationFrame function

I am currently developing a project using THREEjs and would like to organize it in the following manner: class Blah scene : new THREE.Scene() renderer : new THREE.WebGLRenderer() camera : new THREE.PerspectiveCamera() ...

What are all the different methods I can use to transfer element A to element B, and what are those methods?

While experimenting with Jquery, I encountered a roadblock and now have this question in mind. I wish to enclose all the anchor elements within a newly created div element. <td class="cont-mod-none-options" valign="top" align="right"> <a hr ...

struggling with typing an object in react typescript - Element is assumed to have an 'any' type due to its type

Having trouble with the code snippet below: // if I remove the `any` below it breaks. const teams: any = { liverpool: <Liverpool />, manUtd: <ManUtd />, arsenal: <Arsenal />, }; export const TeamCrest = ({ team }: { team: ke ...

Error occurred during the file watch process in PhpStorm after saving the CSSO file

Following the advice in the official PhpStorm documentation, I have implemented a CSS minifier. However, upon attempting to use it, I encountered the following error: cmd.exe /D /C call C:\Users\douglas\AppData\Roaming\npm\css ...

manipulate the form information in node.js

My form.html is very simple: <form id="login-form" action=" ?? " method="post">Email <br/> <input type="text" name="Email" id="em" /> <br/>password <br/> <input type="text" name="password" id="pas" /> ...

How to showcase elements[i] from an array using React

I need to cycle through an array of objects and display each item in a component, with the prop being the index number of the array item. This is the snippet of code I have: import React from 'react'; import './projecten.scss'; import ...

Unexpected issue encountered during ajax request to an API

Struggling to make an API call with necessary data. The request successfully reaches the server. ...

Creating a dynamic table displaying data fetched from a MySQL database, with the added functionality of seamlessly filtering the table content without the need to refresh the

Currently, I am developing a website that showcases leaderboard data retrieved from a MySQL database in the form of a table. The users have the ability to filter and search through this data. By utilizing PHP calls, I was successful in constructing the tab ...

What is the best way to set the default position of an image's right edge within a CSS Overflow DIV?

On my page, I have the following code snippet: <div style="max-width: 600px; overflow-x: scroll;"> <a href="PoolPanoramaBig.jpg" target="_blank"> <img src="PoolPanoramaBig.jpg" style=""/> </a> </div> If the image exc ...

Contrasting box-shadow behavior observed in Chrome versus Firefox

I'm working on a project and aiming to achieve this design: https://i.stack.imgur.com/YflaU.png To test it out, I created a sample page with the following code: p { display: inline; background-color: yellow; box-shadow: 10px 0px 0px red, -1 ...

Creating a masonry layout with uniform row heights

I am trying to achieve a masonry style layout for these cards in Bootstrap. The current setup has columns with the same height, but I want them to have fluid height and consistent margin spacing like the blue line shown below. I attempted to use .card-colu ...