JQuery conflict with two click scripts on WordPress site

Question

I've already checked out some of the links on StackOverflow, but nothing seems to help my issue. I have a small site here that has a JQuery accordion navigation in the middle of the page.

What's supposed to happen is when I click on one of the main links, the accordion should slide down and reveal the child links. Clicking on that would then slide down a div called #panel and it should bring in dynamic content. The content does get loaded, but the panel does not slide down. If I remove the Javascript for the dynamic content, the panel animation does work.

So obviously, there's a conflict here, but I'm not sure what it might be to cure it. Already tried adding evt.preventDefault(); to my click functions, but to no avail. Here's the code for the opening and closing of the panels, which I might add is the second instance of a script I tried to accomplish this:

//Opening and closing the top bar


    var topBarHeight = jQuery('#page-con').height();
    var topBarMargin = -topBarHeight - 1;
    var topBarOpen = false;

    function topBarContentSizeCheck(){
        topBarHeight = jQuery('#page-con').height();

        if(topBarOpen==false){
            jQuery('#panel').css({
                height: 0
            }); 
        }
        else{
            jQuery('#panel').css({
                height: topBarHeight
            }); 
        }
    }

    jQuery('#panel').css({
        height: 0
    }); 

    jQuery('#nav-main ul ul li a').click(function(evt){
        var href = jQuery(this).attr('href');           
        if(href=="#panel"){     
            if(topBarOpen==false){
            topBarOpen = true;

            jQuery('#panel').animate({
                height: topBarHeight,
                useTranslate3d: true
            }); 
            }

            else{

            topBarOpen = false;

            jQuery('#panel').animate({
                height: 0,
                useTranslate3d: true
            }); 

            jQuery('html,body').animate({
                scrollTop: 0,
                useTranslate3d: true
            }, 400);    
            }
            return false;
        }
    });

    jQuery('#closelink').click(function(evt){
        evt.preventDefault();

        topBarOpen = false;

            jQuery('#panel').animate({
                height: 0
            }); 

            jQuery('html,body').animate({
                scrollTop: 0
            }, 400);



            return false;

    });
 </script>

And then the code to load the dynamic content (much smaller):

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery.ajaxSetup({cache:false});
jQuery('#nav-main ul li a').click(function(){
    var post_url = $(this).attr("href");
    var post_id = $(this).attr("rel");

    jQuery("#page-con").html("loading...");

jQuery("#page-con").load(post_url);
window.location.hash = post_id;
return false;
});
});
</script>

Any ideas on how to make the two scripts play nice?

* UPDATE *

So I decided to combine the two click functions as one. It kind of worked but not completely. The panel now comes down but the text is not loading into the #page-con div. There's nothing in console saying this. It's even listing that it does make the proper call to the server. Here's the new code.

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery.ajaxSetup({cache:false});
jQuery(".btn-slide").click(function(){
    var post_id = jQuery(this).attr("rel")
    jQuery("#page-con").html("loading...");
    jQuery("#page-con").load("http://upsilon.lunariffic.com/~swstr0/swsg-ajax/",{id:post_id});
    jQuery("#panel").slideToggle("slow");
    jQuery(this).toggleClass("active");
    return false;
});
});
</script>

score 0 · Answer 1 · answered Feb 27 '14 at 04:29

0

Did you mean to add the 'load content' event to ALL links?

The selector you used jQuery('#nav-main ul li a') will target all <a> tags in the menu, not just ones at the top level. To target links more specifically, you could do this in your second script:

jQuery('#nav-main > ul > li > a')

That way you don't add the dynamic content event to all the links, only the top level ones that you want to target. Check out this Codepen if you want to play around with it.

answered Feb 27 '14 at 04:29

ian

234
2
9

I'm only trying to load content into the #page-con div. That means I need to load from all child links of ABOUT, SERVICES and CLIENTS but also the main CONTACT link since it has no children. – Adam Bell Feb 27 '14 at 19:08
I tried your code, but it actually made things worse. Now clicking on a link doesn't bring the #panel div downward nor does it load content anymore. – Adam Bell Feb 27 '14 at 19:09
OK, I just wanted to make sure you were intentionally targeting all links. Maybe you can put something up on jsfiddle or codepen? Not sure where to go from here without some code to play around with – ian Feb 28 '14 at 02:47

score 0 · Accepted Answer · answered Feb 28 '14 at 21:59

OK, I have the answer. It's in Codepen at http://codepen.io/anon/pen/dsloA It was how I referred the link. I needed to do

jQuery("li.btn-slide a").click(function(){

instead of

jQuery(".btn-slide").click(function(){

So the function is:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery.ajaxSetup({cache:false});
jQuery("li.btn-slide a").click(function(){
    jQuery("#panel").slideToggle("slow");
    jQuery(this).toggleClass("active");
    var post_url = jQuery(this).attr("href");
    var post_id = jQuery(this).attr("rel");
    jQuery("#page-con").html("loading...");
    jQuery("#page-con").load(post_url);
    window.location.hash = post_id;
    return false;
});
});
</script>

Only issue now is for some reason, it's not respecting my call in my page.php template. So I only get the title.

JQuery conflict with two click scripts on WordPress site

2 Answers2