When using jQuery's `.click()` method on an element to collapse it with the 'show' parameter set to false, the disabling action will only take effect after the document

Question

When using jQuery's `.click()` method on an element to collapse it with the 'show' parameter set to false, the disabling action will only take effect after the document

When you first run the program and click anywhere on the body, it activates the collapse element. I want it to only collapse the accordion on click, not show it immediately. Currently, it will deactivate only after it is hidden once.

HTML

<!DOCTYPE html>
<html>
    <body>
        <div class="accordion" style="z-index:9999">
            <div class="panel contact-panel">
                <div class="panel-heading accordion-toggle collapsed" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="color:#fff!important;">    <span><h5 style="margin-bottom:0!important;"><i class="fa fa-envelope">&nbsp;</i>Your Title here</h5></span>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                    <div class="panel-body">
                        <form class="form-horizontal" role="form" method="post" action="" id="contactForm" name="contactForm">
                            <div class="form-group">
                                <label for="name" class="col-sm-3 control-label">Name</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="email" class="col-sm-3 control-label">Email</label>
                                <div class="col-sm-9">
                                    <input type="email" class="form-control" id="email" name="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f4e9f0fce1fdf4d1f5fefcf0f8ffbff2fefc">[email protected]</a>" value="" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="message" class="col-sm-3 control-label">Message</label>
                                <div class="col-sm-9">
                                    <textarea class="form-control" rows="4" name="message" placeholder="Message Content Here"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="human" class="col-sm-3 control-label">Are You <strong><u>Human</u>?</strong>

                                </label>
                                <div class="col-sm-9">
                                    <input id="field_human" class="field_human" type="checkbox" name="human" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-9 col-sm-offset-3">
                                    <button id="submit" name="submit" type="submit" class="btn btn-dark btn-block btn-lg">Send</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

.row > p{
    padding:2%;
    border:1px solid #eee;
    border-radius:10px;
    background:#eee;
}
.accordion {
    width:100%;
    position:fixed;
    bottom:-2.1%;
    margin-bottom:0;
    padding-bottom:0;
}
.accordion label {
    color:#fff;
}
.accordion input {
    border-radius:0;
}
.panel-heading, .panel-heading:hover, .panel-heading:focus, .panel-heading.focus, .panel-heading:active, .panel-heading.active {
    cursor:pointer;
    background-color: #c9302c;
    border-color: #ac2925;
    outline:none;
}
.accordion-toggle {
    text-align:center;
}
...... (remaining CSS code)

JavaScript

// This section contains the JavaScript code logic that operates the functionality of the accordion component.

// If needed, add some unique description or notes about this part of the code.
...... (add more unique content)

FIDDLE

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

Before hiding the collapse element, it's a good idea to check if it already has the class in.

 $(document).on('click', function (e) {
        // Target => collapse('hide')
         if($('#collapseTwo').hasClass('in') && $(e.target).closest('.form-horizontal').length==0) {
             $('#collapseTwo').collapse('hide');
        }
        //stop the code from bubbling up
        e.stopPropagation();
        e.preventDefault();
    });

Check out this Fiddle Demo for more

Answer 2

Before hiding the collapse element, it's a good idea to check if it already has the class in.

 $(document).on('click', function (e) {
        // Target => collapse('hide')
         if($('#collapseTwo').hasClass('in') && $(e.target).closest('.form-horizontal').length==0) {
             $('#collapseTwo').collapse('hide');
        }
        //stop the code from bubbling up
        e.stopPropagation();
        e.preventDefault();
    });

Check out this Fiddle Demo for more

Answer 3

Answer №2

Simply include the line

$('#collapseTwo').collapse('hide', true);

in your code to resolve the issue.

$(document).on('click', function (e) {
        // Target => collapse('hide')
       // $('#collapseTwo').collapse('hide', true); //commented this line.
        //stop the code from bubbling up
        e.stopPropagation();
        e.preventDefault();
    });

View the solution on Fiddle.

Edit:

To fix the problem, add the following jQuery code snippet:

$('#collapseTwo').on('click', function (e) {
        $('#collapseTwo').collapse('hide', true);
    });

Updated version on Fiddle.

Check the following if statement:

if ($('#collapseTwo').is(':visible'))
   {
    $('#collapseTwo').collapse('hide', true);
   }

View on Fiddle.

Answer 4

Simply include the line

$('#collapseTwo').collapse('hide', true);

in your code to resolve the issue.

$(document).on('click', function (e) {
        // Target => collapse('hide')
       // $('#collapseTwo').collapse('hide', true); //commented this line.
        //stop the code from bubbling up
        e.stopPropagation();
        e.preventDefault();
    });

View the solution on Fiddle.

Edit:

To fix the problem, add the following jQuery code snippet:

$('#collapseTwo').on('click', function (e) {
        $('#collapseTwo').collapse('hide', true);
    });

Updated version on Fiddle.

Check the following if statement:

if ($('#collapseTwo').is(':visible'))
   {
    $('#collapseTwo').collapse('hide', true);
   }

View on Fiddle.

Answer 5

Answer №3

It is not recommended to use preventDefault() on the document click trigger as it can cause issues with external links. I have removed the prevent default and now all my links work properly by using easyScroll(). Check out the code below for more details:

//find and uncheck all checkboxes
var checkboxes = document.getElementsByTagName('input');

for (var i = 0; i < checkboxes.length; i++)
{
    if (checkboxes[i].type == 'checkbox')
    {
        checkboxes[i].checked = false;
    }
}

$(document).ready(function()
{
    var $checked = $('#field_human');

    $("#submit").attr("disabled", !$checked.checked)
    
    $checked.click(function()
    {
        if ($checked.prop('checked'))
        {
            $('#submit').removeAttr('disabled');
        }

        else
        {
            $("#submit").attr("disabled",!$checked.checked);
        }
        
        return;
    });

    $('.accordion').on('mouseenter', function()
    {
        $('#collapseTwo').collapse('show');
        return false;
    });

    $('.accordion').on('click', function(e)
    {
        $(this + siblings).collapse('hide', false);
        e.preventDefault();
    });

    $(document).on('click', function(e)
    {
        if($('#collapseTwo').hasClass('in') && $(e.target).closest('.form-horizontal').length==0)
        {
            $('#collapseTwo').collapse('hide');
        }
        
        e.stopPropagation();
    });
});

You can view the working example on my website at Soldier-up Designs

Answer 6

It is not recommended to use preventDefault() on the document click trigger as it can cause issues with external links. I have removed the prevent default and now all my links work properly by using easyScroll(). Check out the code below for more details:

//find and uncheck all checkboxes
var checkboxes = document.getElementsByTagName('input');

for (var i = 0; i < checkboxes.length; i++)
{
    if (checkboxes[i].type == 'checkbox')
    {
        checkboxes[i].checked = false;
    }
}

$(document).ready(function()
{
    var $checked = $('#field_human');

    $("#submit").attr("disabled", !$checked.checked)
    
    $checked.click(function()
    {
        if ($checked.prop('checked'))
        {
            $('#submit').removeAttr('disabled');
        }

        else
        {
            $("#submit").attr("disabled",!$checked.checked);
        }
        
        return;
    });

    $('.accordion').on('mouseenter', function()
    {
        $('#collapseTwo').collapse('show');
        return false;
    });

    $('.accordion').on('click', function(e)
    {
        $(this + siblings).collapse('hide', false);
        e.preventDefault();
    });

    $(document).on('click', function(e)
    {
        if($('#collapseTwo').hasClass('in') && $(e.target).closest('.form-horizontal').length==0)
        {
            $('#collapseTwo').collapse('hide');
        }
        
        e.stopPropagation();
    });
});

You can view the working example on my website at Soldier-up Designs

When using jQuery's `.click()` method on an element to collapse it with the 'show' parameter set to false, the disabling action will only take effect after the document

Answer №1

Answer №2

Answer №3

Similar questions

What is the process for updating a database using a web browser in Django?

Add a div element only if there is a background image present

What's the best approach for implementing TimeInput exclusively in React-Admin?

In Javascript, the DOM contains multiple <li> elements, each of which is associated with a form. These forms need to be submitted using AJAX for efficient

Steps to assign a value to a variable upon clicking on text

What is the method for writing to an HTML file with the use of expressjs?

The ENOENT error code 4058 occurred while attempting to create a new react application using

Is there a way to customize the hamburger icon for the navigation bar in Bootstrap 4?

JavaScript code to verify if a checkbox is selected

Is it possible to include spaces in a JavaScript alert message?

Firefox won't trigger the `beforeunload` event unless I interact with the webpage by clicking on it

Is there a way to restore a minimized min.css file?

Seeking assistance with dilemmas related to jQuery (specifically kendo), .NET Web Service (asmx), and Json

Is it possible to enable unknown keys for multiple schema objects simultaneously using Joi Validation?

Break down a string into an array containing a specific number of characters each

The drag and drop feature seems to be malfunctioning in the Selenium Webdriver when using the Node.js (JavaScript) test automation framework

Maximizing jQuery DataTables performance with single column filtering options and a vast amount of data rows

JavaScript: Exporting and Utilizing a Function within a Model.js File

What is the best way to align a dropdown menu and a textbox on the same line

Extracting Data from Imgur Videos: Measuring their Duration