The code does not work corectly when I use .toggle() method in jQuery

Question

So I have this problem, using toggle(). The thing is that when I use toggle instead of click the block slides away from the page after reload, that I can't even, well, toggle the block. here is the code

If I use .click( ) instead - it works, but if I write "toggle", the block slides away as soon as I reload the page not giving me to toggle itself.

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Email input page</title>
  <link href="css/styles.css" rel="stylesheet" type="text/css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script type="text/javascript" src="js/scripts.js">
    $(document).ready(function($) {
      $('#newdiv').on('toggle', function() {
        $(this).css({
          'background': 'black',
          'color': 'white'
        });
      }, function() {
        $(this).css({
          'background': 'green',
          'color': 'red'
        });
        /!* Stuff to do every *even* time the element is clicked *!/
      });
    });
  </script>
</head>

<body>
  <input value="enter your email:" type="" name="" />

  <div id="newdiv">
    test div for test something
  </div>
</body>

</html>

toggle(fn,fn) was deprecated in 1.8 and then later removed 1.9 — Satpal
– Satpal, Commented Oct 25, 2016 at 10:27

TSR · Accepted Answer · 2016-10-25 10:57:56Z

1

I spotted two problems here:

1) You cannot have a script source and the script code under the same tag <script></script> I removed <script src="js/scripts.js"> to <script>

2) You can listen to toggle event on <details> not a <div>

I hope this will help you. See the snippet below:

   <!DOCTYPE HTML>

    <head>
 <html>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

   
        <meta charset="UTF-8"/>
        <title>Email input page</title>
        <link href="css/styles.css" rel="stylesheet" type="text/css"/>
       
        <script type="text/javascript" >
$(document).ready(function($) {
$('#newdiv').on('toggle', function() {
        $(this).css({
            'background': 'black',
            'color': 'white'
        });
    }, function() {
        $(this).css({
        'background': 'green',
        'color' : 'red'
        });/!* Stuff to do every *even* time the element is clicked *!/
    });
});
</script>
    </head>
    <body>
    <input value="enter your email:" type="" name=""/>

            <details id="newdiv">
        test div for test something
    </details>
    </body>
</html>

answered Oct 25, 2016 at 10:57

TSR

21.5k33 gold badges123 silver badges250 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Slava Over a year ago

yeah, thanks, but that was not exactly what I wanted. I actually have my .js file separated from html, so it was just my mistace of combining the code into one to paste it here.

Slava Over a year ago

what I wanted was to toggle the bg and font colour several times, like I click once - the block paints black, click second time - the block is green, and so on. I could use the click even - black, click odd - green, but wanted to use the toggle method for that. it was not ment to hide some bar, just change its colour.

Slava Over a year ago

here is the other example, that doesn't work correctly

Slava · Accepted Answer · 2016-10-25 13:55:37Z

 Here is another example of code with toggle, that does not work. the thing is that it has to hide/show the form below the block "formHide", changing the text in it the block, but insted with method .toggle() written to code the block just hides on the reload not giving to toggle itself.


<!DOCTYPE HTML>

        <head>
     <html>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


            <meta charset="UTF-8"/>
            <title>Email input page</title>
            <link href="css/styles.css" rel="stylesheet" type="text/css"/>

            <script type="text/javascript" >
    $('#formHide').toggle(function(){
            $('#my_form').fadeOut(10000);
            $(this).text('expand form');
        }, function () {
            $('#my_form').fadeIn(5000);
            $(this).text('colapse form');
        });
    </script>
        </head>
        <body>
        <div id="formHide">colapse form</div>

                    <form action="form.php" id="my_form">
                        <div id="bigform">
                            <fieldset>

                                <div id="div_form_ 1">
                                    <fieldset id="innerfieldset">
                                        <legend>addition options</legend>
                                        <p><strong>You need?</strong></p>
                                        <div id="format">
                                            <input type="checkbox" value="sh" name="dop_oprions" id="shlem" />
                                            <label for="shlem">Helm</label>
                                            <input type="checkbox" value="bag" name="dop_oprions" id="bag" />
                                            <label for="bag">Backpack</label>
                                            <input type="checkbox" value="od" name="dop_oprions" id="od" />
                                            <label for="od">Wear</label>
                                        </div>
                                        <p><strong>insurance</strong></p>
                                        <div id="radio">
                                            <input type="radio" id="inch_yes" value="yes" name="inch" />
                                            <label for="inch">Yes</label>
                                            <input type="radio" id="inch_no" value="no" name="inch" />
                                            <label for="inch">No</label>
                                        </div>
                                    </fieldset>
                                    <input type="submit" value="Send" id="my_button" />
                                </div>

                                <div id="div_form_2">
                                    <span>Model:</span>
                                    <select name="moto" size="1" id="motoSelect">
                                        <option value="1">FIrst value(options)</option>
                                        <option value="2">Second value(options)</option>
                                        <option value="3">Third value(options)</option>
                                        <option value="4">Fourth value(options)</option>
                                    </select>
                                    <span>Days:</span>
                                    <select name="days" size="1" id="daysSelect">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                    </select>
                                    <p><strong>Your email:</strong></p>
                                    <input type="text" id="email" value="Example: [email protected]" /> 
                                    <p><strong>Your desires:</strong></p>
                                    <textarea cols="45" rows="2" id="mytextarea"></textarea>
                                </div>
                            </fieldset>
                        </div>
                    </form>
        </body>
    </html>

Collectives™ on Stack Overflow

The code does not work corectly when I use .toggle() method in jQuery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related