Home » Wordpress » jQuery show/hide not working in wordpress. Works fine in normal website though

jQuery show/hide not working in wordpress. Works fine in normal website though

Posted by: admin November 30, 2017 Leave a comment

Questions:

I am completely at a loss on this one. I have changed $ to jQuery, I’ve tried using the noConflict, I’ve tried using toggle command, a href onClick, and now just tried the show/hide method and nothing seems to be working in this theme. I disabled all plug-ins and this also hasn’t helped. The site is already loading the the jquery library, and many other elements are working with jQuery.

Any help in troubleshooting this from people who have had similar problems and managed to overcome would be amazing! Thanks!

The javascript is

$.noConflict();
jQuery(document).ready(function(){

    jQuery("#slidingTopBar").hide();
    jQuery(".show_hide").show();

jQuery('.show_hide').click(function(){
jQuery("#slidingTopBar").slideToggle();
});

});

The html used to trigger the div is

<div id="TopBar"><a href="#" class="show_hide">SHOW</a></div>

And then once the div is revealed, there is a close div within this div as follows:

<div id="slidingTopBar"><div id="closebar"><a href="#" class="show_hide">CLOSE</a></div></div>

The CSS (all of it just in case there is something here) is

#slidingTopBar
{ 
background:#199651;
display:none;
position: absolute;
height:250px;
width:100%;
left:0px;
top:0px; 
z-index:9999;
}
#TopBar{
position: absolute;
z-index: 9999;
height: 40px;
width: 40px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
#closebar{
position: absolute;
right:10px;
bottom: 10px;
width:35px;
height:35px;
z-index:9999;
background-repeat: no-repeat;
cursor: pointer;
}

The actual wordpress site (not working) is here (top right button to be triggered)

Here it is working as html file

Answers:

Look at your console in chrome (right click and inspect element) . You’ ve got errors. you are trying to execute jquery code before jquery libraries are inserted in your page.

Questions:
Answers:

I tried the code you inputted. I’ll try to visualize it for you with proper indentation:

$.noConflict();
jQuery(document).ready(function(){
    jQuery("#slidingTopBar").hide();
    jQuery(".show_hide").show();
    jQuery('.show_hide').click(function(){
        jQuery("#slidingTopBar").slideToggle();
    });

You are missing the closing ‘)’ for your ready function. This works:

$.noConflict();
jQuery(document).ready(function(){
    jQuery("#slidingTopBar").hide();
    jQuery(".show_hide").show();
    jQuery('.show_hide').click(function(){
        jQuery("#slidingTopBar").slideToggle();
    });
});

I think the template would still allow the ‘$’ notation, so I’d go with that. In order to test things you should use the developer tools available. Google Chrome has very nice features for debugging javascript and jquery. A very good function to use is console.log(whateveryouneedlogged). This function outputs to the console of the developer tools, meaning you can get the value of whatever you pass to it.

And as @scraaappy said, then you haven’t actually loaded the jquery before you run your code. This will help you a lot. Again this is displayed in Google Chrome’s developer tools.

Questions:
Answers:

use this for the first part of your jquery, then it should work.

$(document).ready(function(){
  $("#slidingTopBar").click(function(){
    $(".showhide").toggle();
  });
});