The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Back End [Solved] Creating my first jquery effect in wordpress

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #28005
    Steven Gardner

    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


    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

    email: [email protected]

    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.


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

    Steven Gardner

    Thanks. Solved!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Back End’ is closed to new topics and replies.