Multi-accordion help / JS/ CSS help

So, I’ve been trying to develop this multi-accordion news section for this site.
It’s actually all working, thanks to an insightful plugin. I’ve modified it a little bit so it works as I want it to, but I’ve run into two issues, one which is possibly CSS.

Issue #1:

The idea for the user is that when they view this page, they see all the recent headlines. They can also see who it has been posted by and how many comments have been made to this article. If they wish, they can then click on the headline and the field will expand into the article. They can then either make a comment or view the comments via clicking the View Comments link or clicking the “number of comments” link in the “Posted by…” area (a shortcut to the comments basically).

The problem I’m having is if I make the AUTHOR or the “0” comments a link, it breaks the accordion because the accordion uses an A CLASS to open it up. I’m looking for a fix, I’ve tried making it a H1 or a DIV but that also breaks it.

Issue #2:

This is a pretty picky one, but when you click the headline it expands, but at least in Firefox (haven’t tested it in Chrome yet) the text jumps from the right and to the left, locking in place from which the CSS tells it to (padding-left). I don’t know why it’s exactly doing that, if anyone has any insight on that, it’d be appreciated.

A two-parter to this issue is when you open the Headline to the article and then decide to close the article by clicking on the Headline, parts of the accordion jumps from the darker purple to the light purple before the task is finished. I’m also interested fixing this, but this issue in its entirety are all pretty nit picky things.

You can view the demo of the site here:
http://www.notedls.com/demo

Please if anyone has any advice or fixes, I’d appreciate it, I’ve been trying to get this all to work to the best of my ability, but I’m clearly no guru or expert. Thanks!

H, Welcome to Sitepoint and sorry for the late reply. :slight_smile:

This seems to be more a JS issue than a CSS one so I’ll move the thread to the JS forum. It seems as though the script is programmed to target anchors in that section specifically and you would need to adjust the js to get this to work properly.

I can tell you that the structure of your html is invalid as you can’t wrap an h1 with an anchor. The anchor needs to be inside the h1 but you could set the anchor to display:block to make it fill the available space.

To stop the text jumping when opened add a class t the div and set it to clear:both.


<span class="ui-accordion-right"></span></a>
                    [B]<div style="clear:both"[/B]> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur nisl nec metus tempus quis molestie turpis vehicula. Pellentesque ut orci quis felis vestibulum cursus.

Inline styles for example only - create a class and add it to that element.

It might also be useful if you could point to which version of the accordion you are using so that the original structure can be compared in working order etc.

Ah, sorry and thanks.
The accordion plugin is from here;
http://plugins.jquery.com/project/accordion

Hi,

You’ll need one of the JS experts here to help as I think this is going to be awkward without a lot of changing the way that an accordion works because the trigger element will always trigger the accordion and not your added link.

You could just move your extra links outside the accordion so that they are visible but then you still have the problem of making the accordion open up at the content that you want.

The accordion js works by finding the target element and then opens and closes the next element in the html. If you add anything in-between it gets confused.

Alright, thanks for the input and help.

Where did that doctype from the example page come from? Part of it says transitional while another part says xhtml.

At first glance I see many validation errors, including block-level elements within inline elements, div elements where list items should be, identical id attributes throughout the page, and link tags surrounding headers plus other content.

Whether or not they’re related to the problem at hand, I wouldn’t want to even start trying to debug the problem without ensuring that the bad HTML code wasn’t responsible for confusing the browser.

Please validate the page, fix the problems, and when the HTML code validates and can be properly understood by web browsers, we can then move on to controlling the HTML code via JavaScript.

Don’t get too excited about alt tags on the images though. Leave them empty if someone viewing with no images won’t miss out on anything important.

You may even find that fixing validation problems helps to limit some issues.

Alright, it has been “validated” as best as I can get it without breaking components.
The few “errors” that remain actually have to do with the JS issue I’m having, so instead of breaking it further (if that’s possible), I left it.

I’ve since worked on it further, taking some advice I’ve got from here.
It’s still working as intended, the text doesn’t even lock in place, but now I’m still left with 1 large issue and 1 small one.

They’re basically explained above, the jumping text has been resolved. So really its just this “Posted by…” issue and the color change when you collapse a field. It has been brought to my attention that perhaps its the jQuery that needs to be changed. Which I’ve found it calling the header: “a” tag for the A CLASS, but my attempts of changing this and not breaking the accordion have all failed ;(

Here is where I still think that there is a major HTML structural problem.


<li> 
	<div class="ui-accordion-left"></div> 
	<img src="img/news_ffxiv_a.jpg" class="news_img">
	<a class="ui-accordion-link acc1">
		<h1>FINAL FANTASY XIV ALPHA</h1> 
		<span class="ui-accordion-right"></span>
	</a> 
	...
</li> 

The anchor tag surrounding the heading is not allowed. The anchor tag must only contain inline elements, whereas the heading is a block-level element.

I validated most of the code with corrections of fixes that I’ve been working on since then.
I believe you’re operating off of the old code, hit refresh and view the source again. I’ve since removed the H tag from the inline element. However, I can’t just simply move my information out of the A Class without breaking the accordion or having it in the place I do not wish it to be in. That’s why all the information remains INSIDE the A class.

I don’t think you can get this to work unless you want to re-write that accordion plugin.

It seems you can’t have any anchors in that section as they get toggled on and off.

I can get the “Author” to show as a link by absolutely placing it on top but the JS would still need to be fixed and corrected to account for this structure.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/noted.css" />
<script type="text/javascript" src="http://www.notedls.com/demo/js/jquery.js"></script>
<!--<script type="text/javascript" src="http://www.notedls.com/demo/js/noted.js"></script>-->

<script type="text/javascript">
/*
    NotED
    &#169;2010

    All FINAL FANTASY XIV content and images &#169;2010 SQUARE ENIX CO., LTD. 
    FINAL FANTASY is a registered trademark of SQUARE ENIX CO., LTD.     
*/


$(function() {  
    $('#content').height(0);
    $("#nav li > a").hover(function() { 
            var id = $(this)[0].id;
            var content = 'Default content';
            if (id == 'one')
                content = '<a href="ffxi.html">Final Fantasy XI<a><br>' +
              '<a href="ffxiv.html">Final Fantasy XIV</a><br>' +
              '<a href="sc2.html">StarCraft II</a>';
            else if (id == 'two')
                content = 'Test 2 content';
            else if (id == 'three')
                content = 'Test 3 content';
            else if (id == 'four')
                content = 'Test 4 content';

            $('#content').html(content);
        },  
        function() { }
    ); 

    $("#nav").hover(function() { 
            $('#content').stop().animate({height: "100px"}, 100);
        },  
        function() { 
            $('#content').html('').stop().animate({height: "0"}, 200);  
        }
    ); 

});

$(document).ready(function() {
    $("#acc1, #acc2, #acc3, #acc4, #acc5, #acc6, #acc7, #acc8, #acc9").accordion({
        active: true,
        alwaysOpen: false,
        autoheight: false,
        clearStyle: true
    });
})





        $(function () {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide().filter(':first').show();
            
            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
                return false;
            }).filter(':first').click();
        });










/*
 * jQuery UI Accordion 1.6
 * 
 * Copyright (c) 2007 J&#246;rn Zaefferer
 *
 * http://docs.jquery.com/UI/Accordion
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Revision: $Id: jquery.accordion.js 4876 2008-03-08 11:49:04Z joern.zaefferer $
 *
 */

;(function($) {
    
// If the UI scope is not available, add it
$.ui = $.ui || {};

$.fn.extend({
    accordion: function(options, data) {
        var args = Array.prototype.slice.call(arguments, 1);

        return this.each(function() {
            if (typeof options == "string") {
                var accordion = $.data(this, "ui-accordion");
                accordion[options].apply(accordion, args);
            // INIT with optional options
            } else if (!$(this).is(".ui-accordion"))
                $.data(this, "ui-accordion", new $.ui.accordion(this, options));
        });
    },
    // deprecated, use accordion("activate", index) instead
    activate: function(index) {
        return this.accordion("activate", index);
    }
});

$.ui.accordion = function(container, options) {
    
    // setup configuration
    this.options = options = $.extend({}, $.ui.accordion.defaults, options);
    this.element = container;
    
    $(container).addClass("ui-accordion");
    
    if ( options.navigation ) {
        var current = $(container).find("a").filter(options.navigationFilter);
        if ( current.length ) {
            if ( current.filter(options.header).length ) {
                options.active = current;
            } else {
                options.active = current.parent().parent().prev();
                current.addClass("current");
            }
        }
    }
    
    // calculate active if not specified, using the first header
    options.headers = $(container).find(options.header);
    options.active = findActive(options.headers, options.active);

    if ( options.fillSpace ) {
        var maxHeight = $(container).parent().height();
        options.headers.each(function() {
            maxHeight -= $(this).outerHeight();
        });
        var maxPadding = 0;
        options.headers.next().each(function() {
            maxPadding = Math.max(maxPadding, $(this).innerHeight() - $(this).height());
        }).height(maxHeight - maxPadding);
    } else if ( options.autoheight ) {
        var maxHeight = 0;
        options.headers.next().each(function() {
            maxHeight = Math.max(maxHeight, $(this).outerHeight());
        }).height(maxHeight);
    }

    options.headers
        .not(options.active || "")
        .next()
        .hide();
    options.active.parent().andSelf().addClass(options.selectedClass);
    
    if (options.event)
        $(container).bind((options.event) + ".ui-accordion", clickHandler);
};

$.ui.accordion.prototype = {
    activate: function(index) {
        // call clickHandler with custom event
        clickHandler.call(this.element, {
            target: findActive( this.options.headers, index )[0]
        });
    },
    
    enable: function() {
        this.options.disabled = false;
    },
    disable: function() {
        this.options.disabled = true;
    },
    destroy: function() {
        this.options.headers.next().css("display", "");
        if ( this.options.fillSpace || this.options.autoheight ) {
            this.options.headers.next().css("height", "");
        }
        $.removeData(this.element, "ui-accordion");
        $(this.element).removeClass("ui-accordion").unbind(".ui-accordion");
    }
}

function scopeCallback(callback, scope) {
    return function() {
        return callback.apply(scope, arguments);
    };
}

function completed(cancel) {
    // if removed while animated data can be empty
    if (!$.data(this, "ui-accordion"))
        return;
    var instance = $.data(this, "ui-accordion");
    var options = instance.options;
    options.running = cancel ? 0 : --options.running;
    if ( options.running )
        return;
    if ( options.clearStyle ) {
        options.toShow.add(options.toHide).css({
            height: "",
            overflow: ""
        });
    }
    $(this).triggerHandler("change.ui-accordion", [options.data], options.change);
}

function toggle(toShow, toHide, data, clickedActive, down) {
    var options = $.data(this, "ui-accordion").options;
    options.toShow = toShow;
    options.toHide = toHide;
    options.data = data;
    var complete = scopeCallback(completed, this);
    
    // count elements to animate
    options.running = toHide.size() == 0 ? toShow.size() : toHide.size();
    
    if ( options.animated ) {
        if ( !options.alwaysOpen && clickedActive ) {
            $.ui.accordion.animations[options.animated]({
                toShow: jQuery([]),
                toHide: toHide,
                complete: complete,
                down: down,
                autoheight: options.autoheight
            });
        } else {
            $.ui.accordion.animations[options.animated]({
                toShow: toShow,
                toHide: toHide,
                complete: complete,
                down: down,
                autoheight: options.autoheight
            });
        }
    } else {
        if ( !options.alwaysOpen && clickedActive ) {
            toShow.toggle();
        } else {
            toHide.hide();
            toShow.show();
        }
        complete(true);
    }
}

function clickHandler(event) {
    var options = $.data(this, "ui-accordion").options;
    if (options.disabled)
        return false;
    
    // called only when using activate(false) to close all parts programmatically
    if ( !event.target && !options.alwaysOpen ) {
        options.active.parent().andSelf().toggleClass(options.selectedClass);
        var toHide = options.active.next(),
            data = {
                instance: this,
                options: options,
                newHeader: jQuery([]),
                oldHeader: options.active,
                newContent: jQuery([]),
                oldContent: toHide
            },
            toShow = options.active = $([]);
        toggle.call(this, toShow, toHide, data );
        return false;
    }
    // get the click target
    var clicked = $(event.target);
    
    // due to the event delegation model, we have to check if one
    // of the parent elements is our actual header, and find that
    if ( clicked.parents(options.header).length )
        while ( !clicked.is(options.header) )
            clicked = clicked.parent();
    
    var clickedActive = clicked[0] == options.active[0];
    
    // if animations are still active, or the active header is the target, ignore click
    if (options.running || (options.alwaysOpen && clickedActive))
        return false;
    if (!clicked.is(options.header))
        return;

    // switch classes
    options.active.parent().andSelf().toggleClass(options.selectedClass);
    if ( !clickedActive ) {
        clicked.parent().andSelf().addClass(options.selectedClass);
    }

    // find elements to show and hide
    var toShow = clicked.next(),
        toHide = options.active.next(),
        //data = [clicked, options.active, toShow, toHide],
        data = {
            instance: this,
            options: options,
            newHeader: clicked,
            oldHeader: options.active,
            newContent: toShow,
            oldContent: toHide
        },
        down = options.headers.index( options.active[0] ) > options.headers.index( clicked[0] );
    
    options.active = clickedActive ? $([]) : clicked;
    toggle.call(this, toShow, toHide, data, clickedActive, down );

    return false;
};

function findActive(headers, selector) {
    return selector != undefined
        ? typeof selector == "number"
            ? headers.filter(":eq(" + selector + ")")
            : headers.not(headers.not(selector))
        : selector === false
            ? $([])
            : headers.filter(":eq(0)");
}

$.extend($.ui.accordion, {
    defaults: {
        selectedClass: "selected",
        alwaysOpen: true,
        animated: 'slide',
        event: "click",
        header: "a",
        autoheight: true,
        running: 0,
        navigationFilter: function() {
            return this.href.toLowerCase() == location.href.toLowerCase();
        }
    },
    animations: {
        slide: function(options, additions) {
            options = $.extend({
                easing: "swing",
                duration: 300
            }, options, additions);
            if ( !options.toHide.size() ) {
                options.toShow.animate({height: "show"}, options);
                return;
            }
            var hideHeight = options.toHide.height(),
                showHeight = options.toShow.height(),
                difference = showHeight / hideHeight;
            options.toShow.css({ height: 0, overflow: 'hidden' }).show();
            options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate({height:"hide"},{
                step: function(now) {
                    var current = (hideHeight - now) * difference;
                    if ($.browser.msie || $.browser.opera) {
                        current = Math.ceil(current);
                    }
                    options.toShow.height( current );
                },
                duration: options.duration,
                easing: options.easing,
                complete: function() {
                    if ( !options.autoheight ) {
                        options.toShow.css("height", "auto");
                    }
                    options.complete();
                }
            });
        },
        bounceslide: function(options) {
            this.slide(options, {
                easing: options.down ? "bounceout" : "swing",
                duration: options.down ? 1000 : 200
            });
        },
        easeslide: function(options) {
            this.slide(options, {
                easing: "easeinout",
                duration: 700
            })
        }
    }
});

})(jQuery);

</script>


<title>NotED - "I'm a difference maker, you're just there."</title>
<style type="text/css">
/*
    NotED
    &#169;2010

    All FINAL FANTASY XIV content and images &#169;2010 SQUARE ENIX CO., LTD. 
    FINAL FANTASY is a registered trademark of SQUARE ENIX CO., LTD.         

   /*____________________________________________________________________
   
   [ BASICS ]
   ____________________________________________________________________*/
   
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #000;
}
.news {
    font-size: 12px;
    font-weight: bold;
    padding: 7px;
}
.news_img {
    float: left;
    margin: 5px;
    padding: 2px;
    background-color: white;
    border: 1px solid #000;
}
h1 {
    float: left;
    margin: 0px;
    padding: 1px;
    font-size: 30px;
    color: #9667cc;
}
.clear {
    clear: both;
}
.NotED {
    padding-bottom: 10px;
}
/* .myinfo {
    build me later
    }
    */

   /*____________________________________________________________________
   
   [ NAVIGATION ]
   ____________________________________________________________________*/
    
#nav {
    position: absolute;
    top: 0px;
    right: 5&#37;;
    padding: 0px;
    margin: 0px auto;
    list-style: none;
}
#nav li {
    display: inline;
}
#nav li a {
    float: left;
    display: block;
    font-size: 12px;
    color: #9667cc;
    text-decoration: none;
    padding: 7px 25px;
    background-color: #e5d9f2;
    border-top: none;
}
div#content {
    font-size: 12px;
    background-color: #e5d9f2;
    width: 364px;
}
/*____________________________________________________________________
   
   [ NEWS FEED ]
   ____________________________________________________________________*/

.container {
    margin: auto;
    padding-top: 71px;
    width: 960px;
}
.news_feed {
    float: left;
    width: 542px;
    padding-top: 180px;
}
/* start tab navigation */

ul.tabNavigation {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.tabNavigation li {
    display: inline;
}
ul.tabNavigation li a {
    font-size: 12px;
    font-weight: bold;
    padding: 3px 10px;
    background-color: #fff;
    color: #9667cc;
    text-decoration: none;
}
ul.tabNavigation li a.selected, ul.tabNavigation li a:hover {
    font-size: 12px;
    font-weight: bold;
    background-color: #e5d9f2;
    color: #9667cc;
    padding-top: 7px;
}
ul.tabNavigation li a:focus {
    outline: 0;
}
div.tabs > div {
    padding: 5px;
    margin-top: 3px;
}
#all, #ffxi, #ffxiv, #sc2 {
    width: 542px;
    padding: 0px;
}
/* end tab navigation */

/* start accordion */
ul.ui-accordion-container {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
ul.ui-accordion-container li {
    margin: 0px;
    margin-bottom: 2px;
    padding: 0px;
    background-color: #e5d9f2;
}
ul.ui-accordion-container li a:hover {
    background-color: #ccb3e5;
}
ul.ui-accordion-container li a.ui-accordion-link {
    display: block;
    padding-left: 5px;
    margin-right: 3px;
    height: 62px;
    color: #000;
    text-decoration: none;
    line-height: 28px;
}
ul.ui-accordion-container li .ui-accordion-right {
    display: block;
    position: absolute;
    top: -1px;
    right: 0px;
    height: 1px;
    width: 1px;
}
ul#acc1 > li > div {
    padding-left: 65px;
}
ul.ui-accordion-container li a.acc1 {
    display: block;
    padding-left: 5px;
    margin-right: 3px;
    height: 62px;
    color: #000;
    text-decoration: none;
    line-height: 28px;
}
ul.ui-accordion-container li a.acc2 {
    height: auto;
}
ul#acc1 li.selected {
    background-color: #ccb3e5;
}
ul#acc1 li.selected div {
    background-color: #ccb3e5;
}
ul#acc2 li, ul#acc3 li, ul#acc4 li, ul#acc5 li, ul#acc6 li, ul#acc7 li, ul#acc8 li, ul#acc9 li {
    background-color: #ccb3e5;
}
/* end accordion */

   /*____________________________________________________________________
   
   [ SIDEBAR ]
   ____________________________________________________________________*/

.sidebar {
    float: left;
}

[B].ui-accordion-container li{position:relative}
span.links{
    position:absolute;
    top:40px;
    z-index:99;
}[/B]

</style>
</head>
<body>
<!-- START NAVIGATION -->
<div id="wrap">
    <ul id="nav">
        <div id="content"></div>
        <li><a id="one" href="">Games</a></li>
        <li><a id="two" href="">Apply</a></li>
        <li><a id="three" href="">Logout</a></li>
        <li><a id="four" href="">Search</a></li>
    </ul>
</div>
<!-- END NAVIGATION -->
<div class="container">
<div class="NotED"> <img src="http://www.notedls.com/demo/img/NotED_logo.png" alt="" /> </div>
<div class="myinfo"> </div>
<!-- START NEWS FEED -->
<div class="news_feed">
    <div class="tabs">
        <ul class="tabNavigation">
            <li class="news">NEWS</li>
            <li><a href="#all">All</a></li>
            <li><a href="#ffxi">FFXI</a></li>
            <li><a href="#ffxiv">FFXIV</a></li>
            <li><a href="#sc2">SC2</a></li>
        </ul>
        <!-- START NEWS "All" -->
        <div id="all">
            <ul id="acc1" class="ui-accordion-container">
                <li>
                    <div class="ui-accordion-left"></div>[B]<span class="links">Posted by <a href="#">AUTHOR</a> on Apirl 3rd, 2010 | 0 <a href="#">Comments </a></span>
                    <img src="http://www.notedls.com/demo/img/news_ffxiv_a.jpg" class="news_img" alt="" /><a class="ui-accordion-link acc1">FINAL FANTASY XIV ALPHA<br />[/B]
                    <span class="ui-accordion-right"></span></a>
                    <div class="clear"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur nisl nec metus tempus quis molestie turpis vehicula. Pellentesque ut orci quis felis vestibulum cursus.
                        <ul class="ui-accordion-container" id="acc2">
                            <li>
                                <div class="ui-accordion-left"></div>
                                <a class="ui-accordion-link acc2">View Comments <span class="ui-accordion-right"></span></a>
                                <div> text here </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
            <div class="ui-accordion-left"></div><span class="links">Posted by <a href="#">AUTHOR</a> on Apirl 3rd, 2010 | 0 <a href="#">Comments </a></span>
                    <img src="http://www.notedls.com/demo/img/news_ffxiv_a.jpg" class="news_img" alt="" /><a class="ui-accordion-link acc1">FINAL FANTASY XIV ALPHA<br />
                    <div class="clear"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur nisl nec metus tempus quis molestie turpis vehicula. <a href="#">Pellentesque ut o</a>rci quis felis vestibulum cursus.
                        <ul class="ui-accordion-container" id="acc3">
                            <li>
                                <div class="ui-accordion-left"></div>
                                <a class="ui-accordion-link acc2">View Comments <span class="ui-accordion-right"></span></a>
                                <div> text here </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
            <div class="ui-accordion-left"></div><span class="links">Posted by <a href="#">AUTHOR</a> on Apirl 3rd, 2010 | 0 <a href="#">Comments </a></span>
                    <img src="http://www.notedls.com/demo/img/news_ffxiv_a.jpg" class="news_img" alt="" /><a class="ui-accordion-link acc1">FINAL FANTASY XIV ALPHA<br />
                    <div class="clear"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur nisl nec metus tempus quis molestie turpis vehicula. Pellentesque ut orci quis felis vestibulum cursus.
                        <ul class="ui-accordion-container" id="acc4">
                            <li>
                                <div class="ui-accordion-left"></div>
                                <a class="ui-accordion-link acc2">View Comments <span class="ui-accordion-right"></span></a>
                                <div> text here </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
            <div class="ui-accordion-left"></div><span class="links">Posted by <a href="#">AUTHOR</a> on Apirl 3rd, 2010 | 0 <a href="#">Comments </a></span>
                    <img src="http://www.notedls.com/demo/img/news_ffxiv_a.jpg" class="news_img" alt="" /><a class="ui-accordion-link acc1">FINAL FANTASY XIV ALPHA<br />
                    <div class="clear"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur nisl nec metus tempus quis molestie turpis vehicula. Pellentesque ut orci quis felis vestibulum cursus.
                        <ul class="ui-accordion-container" id="acc5">
                            <li>
                                <div class="ui-accordion-left"></div>
                                <a class="ui-accordion-link acc2">View Comments <span class="ui-accordion-right"></span></a>
                                <div> text here </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
            <div class="ui-accordion-left"></div><span class="links">Posted by <a href="#">AUTHOR</a> on Apirl 3rd, 2010 | 0 <a href="#">Comments </a></span>
                    <img src="http://www.notedls.com/demo/img/news_ffxiv_a.jpg" class="news_img" alt="" /><a class="ui-accordion-link acc1">FINAL FANTASY XIV ALPHA<br />
                    <div class="clear"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur nisl nec metus tempus quis molestie turpis vehicula. Pellentesque ut orci quis felis vestibulum cursus.
                        <ul class="ui-accordion-container" id="acc6">
                            <li>
                                <div class="ui-accordion-left"></div>
                                <a class="ui-accordion-link acc2">View Comments <span class="ui-accordion-right"></span></a>
                                <div> text here </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
            <div class="ui-accordion-left"></div><span class="links">Posted by <a href="#">AUTHOR</a> on Apirl 3rd, 2010 | 0 <a href="#">Comments </a></span>
                    <img src="http://www.notedls.com/demo/img/news_ffxiv_a.jpg" class="news_img" alt="" /><a class="ui-accordion-link acc1">FINAL FANTASY XIV ALPHA<br />
                    <div class="clear"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur nisl nec metus tempus quis molestie turpis vehicula. Pellentesque ut orci quis felis vestibulum cursus.
                        <ul class="ui-accordion-container" id="acc7">
                            <li>
                                <div class="ui-accordion-left"></div>
                                <a class="ui-accordion-link acc2">View Comments <span class="ui-accordion-right"></span></a>
                                <div> text here </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
            <div class="ui-accordion-left"></div><span class="links">Posted by <a href="#">AUTHOR</a> on Apirl 3rd, 2010 | 0 <a href="#">Comments </a></span>
                    <img src="http://www.notedls.com/demo/img/news_ffxiv_a.jpg" class="news_img" alt="" /><a class="ui-accordion-link acc1">FINAL FANTASY XIV ALPHA<br />
                    <div class="clear"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur nisl nec metus tempus quis molestie turpis vehicula. Pellentesque ut orci quis felis vestibulum cursus.
                        <ul class="ui-accordion-container" id="acc8">
                            <li>
                                <div class="ui-accordion-left"></div>
                                <a class="ui-accordion-link acc2">View Comments <span class="ui-accordion-right"></span></a>
                                <div> text here </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
            <div class="ui-accordion-left"></div><span class="links">Posted by <a href="#">AUTHOR</a> on Apirl 3rd, 2010 | 0 <a href="#">Comments </a></span>
                    <img src="http://www.notedls.com/demo/img/news_ffxiv_a.jpg" class="news_img" alt="" /><a class="ui-accordion-link acc1">FINAL FANTASY XIV ALPHA<br />
                    <div class="clear"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur nisl nec metus tempus quis molestie turpis vehicula. Pellentesque ut orci quis felis vestibulum cursus.
                        <ul class="ui-accordion-container" id="acc9">
                            <li>
                                <div class="ui-accordion-left"></div>
                                <a class="ui-accordion-link acc2">View Comments <span class="ui-accordion-right"></span></a>
                                <div> text here </div>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <!-- END NEWS "All" -->
        <!-- START NEWS "FFXI" -->
        <div id="ffxi">
            <ul id="acc1" class="ui-accordion-container">
                <li>
                    <div class="ui-accordion-left"></div>
                    <a class="ui-accordion-link acc1">HEADLINE 1 <span class="ui-accordion-right"></span></a>
                    <div class="clear"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur nisl nec metus tempus quis molestie turpis vehicula. Pellentesque ut orci quis felis vestibulum cursus.
                        <ul class="ui-accordion-container" id="acc2">
                            <li>
                                <div class="ui-accordion-left"></div>
                                <a class="ui-accordion-link acc2">View Comments <span class="ui-accordion-right"></span></a>
                                <div> text here </div>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <!-- END NEWS "FFXI" -->
        <!-- START NEWS "FFXIV" -->
        <div id="ffxiv">
            <ul id="acc1" class="ui-accordion-container">
                <li>
                    <div class="ui-accordion-left"></div>
                    <a class="ui-accordion-link acc1">HEADLINE 1 <span class="ui-accordion-right"></span></a>
                    <div class="clear"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur nisl nec metus tempus quis molestie turpis vehicula. Pellentesque ut orci quis felis vestibulum cursus.
                        <ul class="ui-accordion-container" id="acc2">
                            <li>
                                <div class="ui-accordion-left"></div>
                                <a class="ui-accordion-link acc2">View Comments <span class="ui-accordion-right"></span></a>
                                <div> text here </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="ui-accordion-left"></div>
                    <a class="ui-accordion-link acc1">HEADLINE 2 <span class="ui-accordion-right"></span></a>
                    <div class="clear"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur nisl nec metus tempus quis molestie turpis vehicula. Pellentesque ut orci quis felis vestibulum cursus.
                        <ul class="ui-accordion-container" id="acc3">
                            <li>
                                <div class="ui-accordion-left"></div>
                                <a class="ui-accordion-link acc2">View Comments <span class="ui-accordion-right"></span></a>
                                <div> text here </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="ui-accordion-left"></div>
                    <a class="ui-accordion-link acc1">HEADLINE 3 <span class="ui-accordion-right"></span></a>
                    <div class="clear"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur nisl nec metus tempus quis molestie turpis vehicula. Pellentesque ut orci quis felis vestibulum cursus.
                        <ul class="ui-accordion-container" id="acc4">
                            <li>
                                <div class="ui-accordion-left"></div>
                                <a class="ui-accordion-link acc2">View Comments <span class="ui-accordion-right"></span></a>
                                <div> text here </div>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <!-- END NEWS "FFXIV" -->
        <!-- START NEWS "SC2" -->
        <div id="sc2">
            <ul id="acc1" class="ui-accordion-container">
                <li>
                    <div class="ui-accordion-left"></div>
                    <a class="ui-accordion-link acc1">HEADLINE 1 <span class="ui-accordion-right"></span></a>
                    <div class="clear"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur nisl nec metus tempus quis molestie turpis vehicula. Pellentesque ut orci quis felis vestibulum cursus.
                        <ul class="ui-accordion-container" id="acc2">
                            <li>
                                <div class="ui-accordion-left"></div>
                                <a class="ui-accordion-link acc2">View Comments <span class="ui-accordion-right"></span></a>
                                <div> text here </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="ui-accordion-left"></div>
                    <a class="ui-accordion-link acc1">HEADLINE 2 <span class="ui-accordion-right"></span></a>
                    <div class="clear"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur nisl nec metus tempus quis molestie turpis vehicula. Pellentesque ut orci quis felis vestibulum cursus.
                        <ul class="ui-accordion-container" id="acc3">
                            <li>
                                <div class="ui-accordion-left"></div>
                                <a class="ui-accordion-link acc2">View Comments <span class="ui-accordion-right"></span></a>
                                <div> text here </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="ui-accordion-left"></div>
                    <a class="ui-accordion-link acc1">HEADLINE 3 <span class="ui-accordion-right"></span></a>
                    <div class="clear"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur nisl nec metus tempus quis molestie turpis vehicula. Pellentesque ut orci quis felis vestibulum cursus.
                        <ul class="ui-accordion-container" id="acc4">
                            <li>
                                <div class="ui-accordion-left"></div>
                                <a class="ui-accordion-link acc2">View Comments <span class="ui-accordion-right"></span></a>
                                <div> text here </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="ui-accordion-left"></div>
                    <a class="ui-accordion-link acc1">HEADLINE 4 <span class="ui-accordion-right"></span></a>
                    <div class="clear"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur nisl nec metus tempus quis molestie turpis vehicula. Pellentesque ut orci quis felis vestibulum cursus.
                        <ul class="ui-accordion-container" id="acc5">
                            <li>
                                <div class="ui-accordion-left"></div>
                                <a class="ui-accordion-link acc2">View Comments <span class="ui-accordion-right"></span></a>
                                <div> text here </div>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <!-- END NEWS "SC2" -->
    </div>
    <!-- END NEWS FEED -->
</div>
<div class="sidebar"> </div>
</body>
</html>


I don’t think that’s much help though :frowning: (and the code is getting messy and badly structured now).

I agree with Paul. I think that you should remove the existing accordion code (including things like the “ui-accordion-left” classes, as the accordion should automatically handle that for you) and upgrade to version 1.8 of the jQueryUI accordion which works properly with links instead.

Alright, thanks ;;
I appreciate the help from both of you.