jquery accordion with different width's

Question

I want the following:

• my first header (and associated pannel) is further left then all the other pannels

• the right edge of all accordion element should be justified

jQuery accordion

+---------+
|header 1 |
+---------+
|  ...    |
|content1 |
|         |
+---------+
  +-------+
  |header2|
  +-------+
  |header3|
  +-------+
  |  ...  |
  |cont.3 |
  |       |
  +-------+

I don't know if it's important, but I add accordion dynamically (after page has loaded already).

EDIT:

Adding accordion elements and update the accordion afterwards worked. That's basically what I did:

        var header = document.createElement("h3");
        $(header).css({"width": "350px","margin-left": "50px"})
        header.innerHTML = "Header Text";
        $("#accordion").append(header);
        var div = document.createElement("div");
        $(div).css({"width": "350px","margin-left": "50px"});
        div.innerHTML = "Pannel Text";
        $("#accordion").append(div);
        $("#accordion").accordion("refresh"); 

Answer 1

Here is something that seems to be like you want :

Fiddle : http://jsfiddle.net/CzVhk/

CSS [extract] :

#accordion a{
    margin-left:50px;
}
#accordion div{
    margin-left:50px;
}
#accordion a:first-child{
    margin-left:0px;
}
#accordion a:first-child + div{
    margin-left:0px;
}

HTML :

<div id="accordion">
    <a href="#one" class="first">Recent Posts</a>
    <div id="one">
        this is some info.
    </div>

    <a href="#two">Popular Posts</a>
    <div id="two">
        this is some more info.
    </div>

    <a href="#three">Archived Posts</a>
    <div id="three">
        this is even more info.
    </div>
    <a href="#four">Archived Posts</a>
    <div id="four">
        this is even more info.
    </div>
</div>