jQuery changing elements depending on how many times the button has been clicked

Question

I don't know if I just don't know how to use .toggle() or if I'm just writing the .click() function wrong but essentially I want two different things to happen when I click a button, depending on if it is toggled on or not.

Basically if the button is clicked, I want the hidden div to show and I want the text of the button to change. Then when it's clicked again, the div is hidden again and the text changes back to what it was previously

 $(document).ready( function() { var count = 0; $("#dropdown-toggle-button").click(function() { count++; if (count % 2 !== 0) { // on odd clicks do this $('#dropdown-column').css('display', 'block'); $('#dropdown-toggle-button').text('Toggled Button'); } else if (count % 2 === 0) { // on even clicks do this $('#dropdown-column').css('display', 'none'); $('#dropdown-toggle-button').text('Un-toggled Button'); }; }); }); 

 #dropdown-column { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h2 id="sample-header">Header</h2> <a href="#" id="dropdown-toggle-button">Un-toggled Button</a> <div id="dropdown-column"> <p>Hello, Stranger</p> </div> 

Answer 1

Your only problems are in fact syntax errors!

First off, you have forgotten to add the extra }); to close off the outside document.ready function.

Next, you have a semicolon before else if. This tells javascript that it's starting to read another statement rather than continuing to read the if statement from before, which means "else" doesn't know what to connect itself to.

If you want to refine your code a little bit more, the trailing if statement after the else is redundant, if there are only 2 states, then you can just do

if(statement passes as true){
    // do stuff
}
else { 
    // your code here 
}

Answer 2

Looks like the paren/curly brace matching was a bit off in your javascript. Try this:

$(document).ready( function() {
  var count = 0;
  $("#dropdown-toggle-button").click(function() {
    count++;

    if (count % 2 !== 0) {
      $('#dropdown-column').css('display', 'block');
      $('#dropdown-toggle-button').text('Toggled Button');
    }
    else {
      $('#dropdown-column').css('display', 'none');
      $('#dropdown-toggle-button').text('Un-toggled Button');
    }
  });
});

Answer 3

According to jQuery docs, ( http://api.jquery.com/toggle/ )

With no parameters, the .toggle() method simply toggles the visibility of elements:

$( ".target" ).toggle();

The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

Thus, although the code you've written should work just fine, it is not a very clean solution. I'd suggest the following, as to use the jquery built-in .toggle function.

$(document).ready( function() {

    $("#dropdown-toggle-button").click(function() {

        // first toggle the display of the column element
        $('#dropdown-column').toggle();

        // then check for its display status
        // http://api.jquery.com/visible-selector/
        if ($('#dropdown-column').is(':visible')) {
            // display: block
            $('#dropdown-toggle-button').text('Toggled Button');

        } else {
            // display: none
            $('#dropdown-toggle-button').text('Un-toggled Button');
        }



    });
});