Malky.Kid Malky.Kid - 5 months ago 13
HTML Question

jQuery .change() function must Fire only once

At my page I have a

<select>
tag named
#boxID
. next to it is a div named "wholeThingBody" that is hidden via jQuery.

<select id='boxID'>
<option value='option1'> option1</option>
<option value='option2'> option2</option>
</select>

<div id='wholeThingBody'>
Some content to permanently display once .change has been fired once
</div>


What I need is to have the user click on the
<select>
just once to show the hidden
<DIV>
the problem though is that when the user selects another option in the select, the DIV hides again. (it sort of toggles)

How can I make it so that when the user fires
.change
only once? I tried changing the ID but it doesn't work

$("#boxID").change(function () {
$(this).next().slideToggle(300); //show the content of div #wholeThingBody
$(this).id = "okna"; //attempt to prevent wholeThingBody from toggle hiding
});
$("#wholeThingBody").hide();

Answer

There are several ways to do this:

  1. Use slideDown (the best way):

    $("#boxID").change(function () { 
        $(this).next().slideDown(300);
    });
    $("#wholeThingBody").hide(); 
    
  2. Remove listener:

    $("#boxID").on('change', function() {
        $(this).next().toggleSlide(300);
        $("#boxID").off('change');
    });
    $("#wholeThingBody").hide(); 
    
  3. As for me, I would do this with CSS classes.

    CSS:

    #wholeThingBody {
        display: none;
    }
    
    #wholeThingBody.active { 
        display: block;
    }
    

    JS:

    $("#boxID").on('change', function() {
        $(this).next().addClass('active'); // It will add a class only once
    });
    

By the way, for the future, if you want to change the ID of a DOM element, then do this

this.id = "okna";

instead of

$(this).id = "okna";

Because id is a property of DOM-element, not jQuery-property

Comments