CODEWITHSUNDEEP
javascriptjquerywordpress
Edward H
Edward H

Reputation: 19

JS/Jquery toggleClass in WordPress

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!

Upvotes: 0

Views: 1069

Answers (2)

Hamza Abdaoui
Hamza Abdaoui

Reputation: 2209

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>

Upvotes: 0

void
void

Reputation: 36703

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');
   });
});

Upvotes: 1

Related Questions