как сделать так, чтобы форма всплывала на той же странице после щелчка по тегу привязки с jquery

Question

Я хочу, чтобы код для формы внутри div запускался при нажатии на тег привязки. когда я нажимаю гиперссылку, в консоли это говорит:

Uncaught TypeError: $ (...). draggable не является функцией

Я не знаю, что я делаю здесь неправильно эта функция?

<script>
  $(function() {
    $("showForm").on("click", function() {
      $("#draggable").toggle();
    });
  });
</script>


<div>
  <a href="#" id="showForm"><h3>New Post</h3></a>
</div>


<div id="draggable" class="drag postblock">
  Post No.
  <img src="images/cross.png" alt="X" id="qrClose" class="extButton" title="Close Window">
  <form name="form1" method="post" action="index.php" enctype="multipart/form-data">
  <div>
  <textarea name="post" cols="48" rows="4" wrap="soft" tabindex="0" placeholder="Entry"></textarea>
  </div>
  <div>
  <input type="file" id="qrFile" tabindex="0" size="19" title="Upload file">
  <input type="submit" name="submit" value="Post">
  </div>
  </form>
</div>

Answer 1

1) Используйте # для идентификатора, поэтому:

Изменить:

$("showForm").on("click", function(){...})

На:

$("#showForm").on("click", function(){...})

2) вставить jquery CDN выше html код

3) использовать $(document).ready(function(){

Полный код:

$(document).ready(function(){
  $("#showForm").on("click", function() {
     $("#draggable").toggle();
     })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="#" id="showForm"><h3>New Post</h3></a>
</div>


<div id="draggable" class="drag postblock">
  Post No.
  <img src="images/cross.png" alt="X" id="qrClose" class="extButton" title="Close Window">
  <form name="form1" method="post" action="index.php" enctype="multipart/form-data">
  <div>
  <textarea name="post" cols="48" rows="4" wrap="soft" tabindex="0" placeholder="Entry"></textarea>
  </div>
  <div>
  <input type="file" id="qrFile" tabindex="0" size="19" title="Upload file">
  <input type="submit" name="submit" value="Post">
  </div>
  </form>
</div>