jQuery show/hide not working in wordpress. Works fine in normal website
though
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:
www.youronlinefriend.com/tsj (top right button to be triggered) Here it is
working as html file: www.youronlinefriend.com/tsj/TheySayJump.html
No comments:
Post a Comment