The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

[Solved] Creating my first jquery effect in wordpress

  • # February 14, 2010 at 3:58 pm

    I am currently developing my first wordpress theme for a gym website and i want to create a jquery Accordion effect to display the gym classes. This is also my first attempt at adding jquery without a WP plugin.
    I have followed Chris’s WordPress book on loading jquery by

    < ?php wp_enqueue_script("jquery"); ?>
    < ?php wp_head(); ?>

    and linking to the script just below the wp_head.
    This is the menu.js

    Simple JQuery menu.
    HTML structure to use:


    1: each menu MUST have an ID set. It doesn’t matter what this ID is as long as it’s there.
    2: each menu MUST have a class ‘menu’ set. If the menu doesn’t have this, the JS won’t make it dynamic

    Optional extra classnames:

    noaccordion : no accordion functionality
    collapsible : menu works like an accordion but can be fully collapsed
    expandfirst : first menu item expanded at page load

    Copyright 2008 by Marco van Hylckama Vlieg


    Free for non-commercial use

    function initMenus() {
    $(‘ ul’).hide();
    $.each($(‘’), function(){
    $(‘#’ + + ‘.expandfirst ul:first’).show();
    $(‘ li a’).click(
    function() {
    var checkElement = $(this).next();
    var parent =;

    if($(‘#’ + parent).hasClass(‘noaccordion’)) {
    return false;
    if((‘ul’)) && (‘:visible’))) {
    if($(‘#’ + parent).hasClass(‘collapsible’)) {
    $(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);
    return false;
    if((‘ul’)) && (!‘:visible’))) {
    $(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);
    return false;
    $(document).ready(function() {initMenus();});

    and this is the HTML

    My effects just arent working as can be seen here

    Does anyone have any clue of what the problem could be.

    I read somewhere that if i replace all


    symbols with


    that should sort the problem, but it did’nt.

    Any help would be much appreciated.

    # February 14, 2010 at 10:45 pm

    Well, it’s jQuery….it is case sensitive. Is that what you did?

    # February 15, 2010 at 11:48 am

    Thanks. Solved!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed