Malky.Kid Malky.Kid - 2 years ago 109
HTML Question

jQuery .change() function must Fire only once

At my page I have a

tag named
. 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>

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

What I need is to have the user click on the
just once to show the hidden
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
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

Answer Source

There are several ways to do this:

  1. Use slideDown (the best way):

    $("#boxID").change(function () { 
  2. Remove listener:

    $("#boxID").on('change', function() {
  3. As for me, I would do this with CSS classes.


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


    $("#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 = "okna";

instead of

$(this).id = "okna";

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download