Forums

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
    Posts
  • February 14, 2010 at 3:58 pm #28005
    Steven Gardner
    Participant

    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

    Code:

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

    Code:
    /*
    Simple JQuery menu.
    HTML structure to use:

    Notes:

    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

    web: http://www.i-marco.nl/weblog/
    email: [email protected]

    Free for non-commercial use
    */

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

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

    and this is the HTML

    Code:

    My effects just arent working as can be seen here
    http://www.urbandisturbancefife.com/mma/index.php/timetable/

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

    I read somewhere that if i replace all

    Code:
    $

    symbols with

    Code:
    jquery

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

    Any help would be much appreciated.

    February 14, 2010 at 10:45 pm #70939
    Luminated
    Member

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

    February 15, 2010 at 11:48 am #70949
    Steven Gardner
    Participant

    Thanks. Solved!

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