Grow your CSS skills. Land your dream job.

Accordian: First element in the list triggering second eleme

  • # November 19, 2009 at 9:01 pm

    Alright, so I’ve got a bit of a problem.

    I decided to redo my portfolio site, and wanted it to be a vertical scrolling page, with each list item on the left, scrolling to the assigned part on the right. That part was easy, the script already done, I just dropped it in, styled it, it worked. After much hacking and sawing and patching, I basically got it doing what I wanted it to do.

    My current problem is, however, that I changed the nav to an accordion, with one section that opened to have a submenu. It was working fine up until I tried to put a nav element before the one with the submenu, because now the first nav button triggers the opening of the submenu, which is now the second element.

    I’m not sure where exactly my problem lies, as I’m very limited on jQuery knowledge, and the code is very messy. But the problem itself is clearly visible if you look at the live copy:

    http://www.brianpodell.com/ExpSite2/indexTEST2.html

    Here’s the relevant code, isolated from the document.

    Code:
    $(“#sub_navi”).idTabs(function(id,list,set){
    $(“a”,set).removeClass(“selected”)
    .filter(“[@href='"+id+"']“,set).addClass(“selected”);
    for(i in list)
    $(list[i]).hide();
    $(id).fadeIn();
    return false;

    });

    $(function() {

    $(“#accordion”).tabs(“#accordion div.pane”, {tabs: ‘h2′, effect: ‘slide’, initialIndex: -2});
    collapsible: true

    });

    $(document).ready(function() {

    // main vertical scroll
    $(“#main”).scrollable({

    // basic settings
    vertical: true,
    size: 1,
    clickable: false,

    // up/down keys will always control this scrollable
    keyboard: ‘static’,

    // assign left/right keys to the actively viewed scrollable
    onSeek: function(event, i) {
    horizontal.scrollable(i).focus();
    }

    // main navigator (thumbnail images)
    }).navigator({navi: “#main_navi”, naviItem: “h2″})

    // horizontal scrollables. each one is circular and has its own navigator instance
    var horizontal = $(“.scrollable”).scrollable({size: 1}).circular().navigator(“.navi”);
    var horizontal = $(“.scrollable”).scrollable({size: 1}).circular().navigator(“#sub_navi”);

    // when page loads setup keyboard focus on the first horzontal scrollable
    horizontal.eq(0).scrollable().focus();

    });

    If you’ve got any insight, I would be more than grateful for any assistance. Or, if you wouldn’t mind discussing one-on-one how to rebuild the code to make it valid, that would be a godsend.

    Anyway, thanks for reading. I’ll be around.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".