CODEWITHSUNDEEP
javascriptjqueryjquery-ui-accordion
Joshc
Joshc

Reputation: 3853

jQuery accordion issue with template markup

I'm having a little issue with this accordion script.

And I know why it's happening but I can't fix it. And I'm not sure it's possible to fixed it?

The accordion script i'm using is this and it's very easy to implement. http://www.i-marco.nl/weblog/jquery-accordion-menu/

The mark-up for this accordion is simple and semantic.

<ul class="menu">

    <li>
        <a href="#">Link</a>
        <ul class="acitem">
            <li><a href="http://www.pivotx.net/">PivotX</a></li>
            <li><a href="http://www.wordpress.org/">WordPress</a></li>
            <li><a href="#four">four</a></li>
            <li><a href="http://www.textpattern.com/">Textpattern</a></li>
            <li><a href="http://typosphere.org/">Typo</a></li>
        </ul>
    </li>

    <li>
        <a href="#">Weblog Tools</a>
        <ul class="acitem">
            <li><a href="http://www.pivotx.net/">PivotX</a></li>
            <li><a href="http://www.wordpress.org/">WordPress</a></li>
            <li><a href="#four">four</a></li>
            <li><a href="http://www.textpattern.com/">Textpattern</a></li>
            <li><a href="http://typosphere.org/">Typo</a></li>
        </ul>
    </li>

    <!-- and so fourth -->

</ul>

This is the style of the markup that the script if designed to work with. And it works, see here... http://jsfiddle.net/motocomdigital/CzZqZ/1/

But my problem is because I'm working with a template that I can't change the mark-up of, see my outputted markup below.

<ul class="menu">

    <ul>
        <li>
            <a href="#">Link</a>
            <ul class="acitem">
                    <li><a href="http://www.pivotx.net/">PivotX</a></li>
                    <li><a href="http://www.wordpress.org/">WordPress</a></li>
                    <li><a href="#four">four</a></li>
                    <li><a href="http://www.textpattern.com/">Textpattern</a></li>
                    <li><a href="http://typosphere.org/">Typo</a></li>
            </ul>
        </li>
    </ul>

    <ul>
        <li>
            <a href="#">Weblog Tools</a>
            <ul class="acitem">
                    <li><a href="http://www.pivotx.net/">PivotX</a></li>
                    <li><a href="http://www.wordpress.org/">WordPress</a></li>
                    <li><a href="#four">four</a></li>
                    <li><a href="http://www.textpattern.com/">Textpattern</a></li>
                    <li><a href="http://typosphere.org/">Typo</a></li>
            </ul>
        </li>
    </ul>

</ul>

This the mark up that is outputted which is stupid.

Its outputting more than it needs to.

I've created a js fiddle for the markup above so you can see what is happening http://jsfiddle.net/motocomdigital/CzZqZ/2/

It's not closing the others when a new one is opening...

Does anyone know how to fix the script so it work like the first jsfiddle, but with the crazy markup above?

Thanks very very much if anyone can help.

Josh

Upvotes: 1

Views: 382

Answers (2)

Jim Ecker
Jim Ecker

Reputation: 417

Add the class 'noaccordian" to your "ul" elements that you want to expand/collaspse on.

Example:

<ul class="menu">
    <ul class="noaccordion">
        <li>
            <a href="#">Click Here</a>
            <ul class="acitem">

Upvotes: 0

Viruzzo
Viruzzo

Reputation: 3025

Inside the click handler, change to: var parent = this.parentNode.parentNode.parentNode;. With this it works as the other example you posted.

Upvotes: 1

Related Questions