jQuery Powered Accordion Missing Anchor Link Functionality

Question

For today's question, I have a very small accordion I built with the jQuery Tools library. I found that jQuery tools offered me the functionality I needed, with a much smaller footprint than the 800kb jQuery UI. Not to mention smoother and better quality animation.

However, we are beginning to populate the site now, and I am a bit baffled that the links in my accordion are not working. I used a simple href="#' for my placeholders, ad suddenly those will not take me back to the top of the page.

THE HTML:

<div class="col">
            <ul id="accordion" class="footerNav">
                <li class="topLevel">
                    <a class="current" href="#">Autos</a>
                    <ul id="autos" class="pane">
                        <li><a href="#">News</a></li>
                        <li><a href="#">Reviews</a></li>
                        <li><a href="#">Car Tech</a></li>
                        <li><a href="#">Fuel Economy &amp; Safety</a></li>
                        <li><a href="#">Buying &amp; Selling</a></li>
                        <li><a href="#">Everything Else</a></li>
                    </ul>
                </li>
                <li class="topLevel">
                    <a href="#">Lifestyle</a>
                    <ul id="lifestyle" class="pane">
                        <li><a href="#">Music</a></li>
                        <li><a href="#">Food</a></li>
                        <li><a href="#">Travel</a></li>
                        <li><a href="#">Shopping</a></li>
                        <li><a href="#">Everything Else</a></li>
                    </ul>
                </li>
                <li class="topLevel">
                    <a href="#">People</a>
                    <ul id="people" class="pane">
                        <li><a href="#">Who You Know</a></li>
                        <li><a href="#">Who You Should Know</a></li>
                        <li><a href="#">Everyhone Else</a></li>
                    </ul>
                </li>
                <li class="topLevel">
                    <a href="#">Tech</a>
                    <ul id="tech" class="pane">
                        <li><a href="#">Business</a></li>
                        <li><a href="#">Pleasure</a></li>
                        <li><a href="#">Everyhting Else</a></li>
                    </ul>
                </li>
                <li class="topLevel">
                    <a href="#">Trends</a>
                    <ul id="trends" class="pane">
                        <li><a href="#">Online</a></li>
                        <li><a href="#">Offline</a></li>
                        <li><a href="#">Everyhting Else</a></li>
                    </ul>
                </li>
                <li><a href="#">Blog</a></li>
            </ul>
        </div>

THE CSS:

footer .col ul.footerNav li {
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:100;
    text-decoration:none;
    list-style: url(../../images/footer_bullet_1.png);
}
footer .col ul.footerNav li.topLevel {
    list-style: url(../../images/footer_bullet_3.png);
}
footer .col ul.footerNav li.topLevel:hover {
    cursor:pointer;
    list-style: url(../../images/footer_bullet_2.png);
}
footer .col ul.footerNav li.topLevel:active {
    list-style: url(../../images/footer_bullet_2.png);
}

footer .col ul.footerNav li a {
    display:block;
    color:#ddd;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:100;
    text-decoration:none;
    outline:none;
}
footer .col ul.footerNav li a:hover {
    text-decoration:underline;
}

THE JAVASCRIPT:

$(document).ready(function() {

            // Footer Accordion
            $("#accordion").tabs("#accordion ul.pane", {
                tabs: 'span', 
                effect: 'slide', 
                initialIndex: 0
            });

        });

To view a demo of the site, you can got here:

http://rawdesigns.net/web2carz/

The accordion exists in the center column of the footer.

I suppose I should have specified that these links will be going to outbound pages. The 'to top' functionality is just something to test that the links actually work. I have never had to specify a #toTop ID of any kind before when using . The links on this page will be poulated with outbound pages as we move into production. — robabby, Jan 16 '12 at 17:12

Luca Filosofi · Accepted Answer · 2012-01-17T01:37:32.687

1

you are using the wrong tool here,

you are using the Tab tool for a Tree View task, your html structure is completely different from the one needed to the library in order to work.

as is now you are treating all the </a> tags as "tabs" and so they will not go anywhere, they just will trying to find the closest content related to it that is for istance a </div> that obviously is not there.

you just need this code to make that Tree View

demo: http://jsbin.com/obazew/3

/* CSS */ .pane { display:none }

$(function() {
    $('li.topLevel a:first-child').click(function(e) {
        e.preventDefault();
        $('.pane:visible').slideUp('slow');
        $(this).next('.pane:not(:visible)').slideDown('slow');
    });
});

edited Jan 17 '12 at 01:37

answered Jan 16 '12 at 16:50

Luca Filosofi

30,905
9
70
77

This did the trick to offer me link functionality, however, now all of the links when clicked will take me to the top of the page. When I click on the Pane for Autos, it takes me to the top of the page as the content slides out. I hae uploaded these changes to my server, so you can follow the link in my post to see what I am talking about. – robabby Jan 16 '12 at 17:23
What I did here is added an id of #footer to my anchors in the topLevel anchor, so now the page will not go toTop on click when expanding the Accordion. Now, since I am still working on my jQuery Chops, how would I initiate this accordion to start with the first pane expanded? – robabby Jan 16 '12 at 17:32
I figured it out. This worked for me: $('li.topLevel #autos').show(); – robabby Jan 16 '12 at 19:27

Didier Ghys · Answer 2 · 2012-01-16T16:46:10.777

I think it comes from the plugin itself. Looking at the source code, it seems it is possible to make cross-tab linking, and this is done this way:

// cross tab anchor link
panes.find("a[href^=#]").bind("click.T", function(e) {
    self.click($(this).attr("href"), e);        
});

It finds all <a> in all panels with href starting with a #, it binds a click event and the handler calls the internal "click" method self.click, used to switch tabs.

Your links falls in this scenario and thus are considered cross-tab links.

I don't think changing your links to <a href="#top"> would resolve the problem as they will still be considered as cross-tab links. it will just won't work as such, or as you want.

score 0 · Answer 3 · answered Jan 16 '12 at 16:39

0

Use and specify your "#top" tag at the top of the page.

Also, you can now use element ID's as instead of named anchors: http://www.bennadel.com/blog/822-Using-BODY-ID-As-A-Back-To-Top-Page-Anchor.htm

answered Jan 16 '12 at 16:39

dreamrunner

1
6

I commented on my initial post in reference to your response. – robabby Jan 16 '12 at 17:14

jQuery Powered Accordion Missing Anchor Link Functionality

3 Answers3