WordPress中的JS / Jquery toggleClass

Question

I'm trying to integrate a simple toggleClass function on my main home page in WordPress.

I have a built for my main navigation links, and on two of the links I am trying to have it so when you click them a hidden div toggles the class hideMe to turn on and off display: none

The code for the javascript is as follows, I saw online that you can't use $ and instead have to use jQuery

  $(document).ready(function () { function cntct(){ jQuery('#contactBx').toggleClass('hideMe'); //$('#contactBx').toggleClass('hideMe'); //alert('hey'); }); }); 

 .hidCnt{ width: 250px !important; height: 200px !important; background-color: red !important; z-index: 10 !important; position: absolute; top: 19%; left: 60%; display: none; } .hideMe{ display: block !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="site-nav"> <a class="nav-link active" href="anthonycarreramusic.com">Home</a> <a class="nav-link" href="#aboutAnch">About</a> <a class="nav-link" href="shows">Shows</a> <a class="nav-link" href="media">Gallery</a> <a class="nav-link" id="contactLink" runat="server" onClick="cntct();">Contact</a> <a class="nav-link" id="socialLink" runat="server">Social</a> </nav> <div class="hidCnt" id="contactBx"> This is my test contact form region </div> 

For some reason I can't get any of it to trigger, (the alert or the toggleClass) and was hoping someone could point out what I might be missing to make this function correctly. Thanks for any and all information!

Answer 1

Your cntct() is inside multiple functions and is not exposed to window so on click of the <a will not have any clue where the function is and will result in an error.

You can instead bind a click event to id contactLink which is the same element on which you are doing onclick .

$(document).ready(function () {
   $("#contactLink").on("click", function(){
     jQuery('#contactBx').toggleClass('hideMe');
   });
});

Answer 2

You should create your function out of $(document).ready() . And you can tell that, in this case, there is no need to use $(document).ready() .

 function cntct(){ jQuery('#contactBx').toggleClass('hideMe'); } 

 .hidCnt{ width: 250px !important; height: 200px !important; background-color: red !important; z-index: 10 !important; position: absolute; top: 19%; left: 60%; display: none; } .hideMe{ display: block !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="site-nav"> <a class="nav-link active" href="anthonycarreramusic.com">Home</a> <a class="nav-link" href="#aboutAnch">About</a> <a class="nav-link" href="shows">Shows</a> <a class="nav-link" href="media">Gallery</a> <a class="nav-link" id="contactLink" runat="server" onClick="cntct();">Contact</a> <a class="nav-link" id="socialLink" runat="server">Social</a> </nav> <div class="hidCnt" id="contactBx"> This is my test contact form region </div>