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

Save mathematical equations written in HTML text boxes to a MySQL database

What are the various ways to incorporate material graphic elements on an HTML static webpage?

What is the best way to explain the concept of HTML5?

Discover the art of concurrently listening to both an event and a timer in JavaScript

Create a single button that controls checkboxes with the help of HTML, CSS, SCSS, and Bootstrap 4

User authentication on AngularJs is only initiated on the second interaction

The onclick function fails to function properly following an Ajax reload of the <div> element

Looking for a solution to organize the dynamically generated list items in an HTML page

Utilizing jQuery to append a function to an object and subsequently initiate an event on it

AngularJS is encountering an issue with the callback function, resulting in an error

Tips for using Selenium and Javascript executor to search through the Canvas system?

In JavaScript, a true statement does not trigger a redirect

Switching the placement of my menu bar to the other side of my logo

Executing a JavaScript command to execute a PHP script and subsequently inserting HTML content into the appropriate row

Navigating a single page application with the convenience of the back button using AJAX

Using Jquery to target an element within the same DOM element and apply changes

Typescript MUI Autocomplete: Can you specify the parameter type of the PaperComponents function?

Undefined type in JavaScript

Does IE 9 support Display Tag?

Send information from the textbox