Anonymous Function/Reference Error with Javascript in Wordpress

Question

I'm having difficulties getting my javascript code to work with my site built in Wordpress. I have a jsfiddle which you can find here: http://jsfiddle.net/sarahk3112/aw5xR/13/

This isn't styled exactly how I want it but shows the desired effect with the slide down/up and toggle between the "portfolio" and "about" links that have sub navigation. So it works perfectly here but when I implement the same exact code in my Wordpress page template it doesn't work. The Wordpress site is currently in maintenance mode since I need to fix this so I can't point you to a live link there unless absolutely necessary (it's a client site and they're not ready to go live yet).

Here is the error that Safari shows when I click "portfolio":

(anonymous function) - moderndayfloral.com

The error Chrome shows when I click "portfolio":

Uncaught ReferenceError: slideonlyone is not defined

Here is the Javascript code in my functions.js file:

    jQuery(document).ready(function(){
    function slideonlyone(thechosenone) {
    $('span[class|="subnav"]').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
    if ($(this).css('display') == 'block') {
        $(this).hide(200);
    }
    else {
        $(this).show(200);
        }
    }
    else {
    $(this).hide(200);
    }
    });
    }
    });

And here is the html code in my page template file:

    <ul id="hometopnav">
    <li><a id="portfolio" href="javascript:slideonlyone('portfolio');" >portfolio</a>
    <span id="portfolio" style="display: none;" class="subnav">     
    <img src="http://moderndayfloral.com/wp-content/themes/moderndayfloral/_/images/whitearrow.png">
    <a href="/weddings">weddings</a>
    <a href="/events">events</a>
    </span>
    </li>
    <li><a href="/eventdesign">event design</a></li>    
    <li><a href="/boutique">boutique</a></li>
    <li><a id="about" href="javascript:slideonlyone('about');" >about</a>
    <span id="about" style="display: none;" class="subnav">     
    <img src="http://moderndayfloral.com/wp-content/themes/moderndayfloral/_/images/whitearrow.png">
    <a href="/philosophy">philosophy</a>
    <a href="/services">services</a>
    <a href="/jenn">jenn</a>
    </span>
    </li>
    <li><a href="/thanks">thanks</a></li>
    <li><a href="/accolades">accolades</a></li>
    <li><a href="/blog">blog</a></li>
    <li><a href="/contact">contact</a></li>
    </ul>

I hope this is enough information to seek assistance. I'm caught between a rock and hard place with not being able to make it live so you can see. I know Javascript needs a little extra care when it comes to Wordpress so I appreciate any help that can be offered. If there is any other info I can provide to help, just let me know!

Thanks for your time!

Answer 1

You don't need to wrap a function on document ready, it doesn't have anything to execute as soon as the dom is loaded, and you are checking for wrong display as show transforms in inline display:

var jQuery = {};
jQuery = jQuery.noConflict(true);
function slideonlyone(thechosenone) {
    jQuery('span').closest('.subnav').each(function(index) {
        if (jQuery(this).attr("id") == thechosenone) {
            if (jQuery(this).css('display') != 'none') {
                jQuery(this).hide(200);
            } else {
                jQuery(this).show(200);
            }
        }
    });
}