How to hide the div after on click event javaScript

Question

This is my codes (JavaScript)...

<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#track1').click(function() {
            $('#wrap').append('<embed id="embed_player" src="alert.mp3" autostart="true" hidden="true"></embed>');
            $("#show").slideDown(2000);
        });
        $('#track2').click(function() {
            $('#wrap').append('<embed id="embed_player" src="alert.mp3" autostart="true" hidden="true"></embed>');
            $("#show1").fadeIn(3000);
        });
        $('#track3').click(function() {
            $('#wrap').append('<embed id="embed_player" src="alert.mp3" autostart="true" hidden="true"></embed>');
            $("#show1").fadeOut(3000);
            $("#show").slideUp(3000);
        });

    });

    function quick_confirm() {
        $('#wrap').append('<embed id="embed_player"     src="alert.mp3" autostart="true" hidden="true"></embed>');
        var agree = confirm("Are you sure you wish to continue?");
        if (agree) {
            $("#show1").fadeOut(3000);
            $("#show").slideUp(3000);
            return true;
        }
        else
            return false;
    }

    function valid() {
        var name = document.getElementById("name").value;
        var pass = document.getElementById("pass").value;
        error = '';
        if (name == "" && pass == "")
            error = "\nEnter both fields";
        else if (name == '')
            error = "Enter your name";
        else if (pass == '')
            error = "\nEnter your password";


        if (error != "") {
            document.getElementById("error").innerHTML = error + "<button id='showtime'>HIDE</button>";
            $('#wrap').append('<embed id="embed_player" src="alert.mp3" autostart="true" hidden="true"></embed>');
            $("#error").slideDown(3000);
            return false;
        }
        $('#showtime').click(function() {
            $('#wrap').append('<embed id="embed_player" src="alert.mp3" autostart="true" hidden="true"></embed>');
            $("#error").toggle; //**help me solve the problem..
        });
    }
</script>

<div id='error'></div>
<form method='post' action="testsound.php" onsubmit='return valid()' >
    <strong>Name</strong><input type='text' id='name' name='name'>
    <strong>password</strong><input type='password' id='pass' name='pass'>
    <input type='submit' value='Login'>
</form>

Please help me ASAP, need help on hiding div element ... After the form submitted, the div error will show, but i'm unable to hide the div after clicking the hide button, which has an id of showtime..

Answer 1

You can use,

$('#error').click(function() {
    $(this).hide(3000);
});

Answer 2

Make sure you actually invoke the toggle function with parentheses, like this:

$("#error").toggle();

Or possibly use hide instead:

$("#error").hide();

Also, notice that in your valid function, if there is an error you return false, before you bind the click event to the #showtime element. There are a number of ways to solve this, depending on precisely how your page is organized (it's hard to tell from just the code provided here).

• Bind the even before you return:

  $('#showtime').click(function() {
      $('#wrap').append('<embed id="embed_player" src="alert.mp3" autostart="true" hidden="true"></embed>');
      $("#error").toggle(); // or hide()
  });
  if (error != "") {
      document.getElementById("error").innerHTML = error + "<button id='showtime'>HIDE</button>";
      $('#wrap').append('<embed id="embed_player" src="alert.mp3" autostart="true" hidden="true"></embed>');
      $("#error").slideDown(3000);
      return false;
  }
  

• Bind the event in thedocument.ready handler:

  $(document).ready(function() {
      ...
      $('#showtime').click(function() {
          $('#wrap').append('<embed id="embed_player" src="alert.mp3" autostart="true" hidden="true"></embed>');
          $("#error").toggle(); // or hide()
      });
  }