问题

What's going on?: The accordion is working properly, but the tabs show up on the right side of the accordion.

jQuery

$(document).ready(function(){
    $(".accordion .title").click(function(){
        $(this).next(".accordion .details").slideToggle(500)
    }).next().hide();
});

CSS: Hoverbox

.hoverbox
{
    cursor: default;
    list-style: none;
} .hoverbox a {
    padding-top: 5px;
    cursor: default;
    text-decoration: none;
    color: black;
} .hoverbox a .preview {
    display: none;
} .hoverbox a:hover .preview {
    display: block;
    position: absolute;
    top: -33px;
    left: -45px;
    z-index: 1;
} .hoverbox img {
    vertical-align: top;
    height: 125px;
} .hoverbox li {
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
    text-align: right;
    text-decoration: none;
} .hoverbox .preview {
    border-color: #000;
    height: 300px;
} .gallery {
    width: 100%;
}

HTML: A sample for one image.

<div class="accordion">
    <div class="title"><h2></h2></div>
    <ul class="details">
    <div class="gallery">
    <ul class="hoverbox">
        <li>
        <a href="#">
            <img src="pictures/1.jpg" class="thumbnail"/>
            <img src="pictures/1.jpg" class="preview"/></br>
            Compass
        </a>
        </li>
    </ul>
    </div>
    </ul>
</div>

First, let's start off with a just loaded accordion.

After I click "Glass Windows", this is what happens.

What I have done: For the past four or five days I have been spending many hours relocating <div> tags, making sure my code is correct and dabbling with the CSS (specifically making sure the text wasn't aligned oddly or there was something goofy about how the images were displayed). Not very specific, I know. I apologize for the not so short and concise question.

Update

I attempted to use Dexter's suggestion, but I still keep having issues with the text alignment.

After clicking on Section 1...

And Section 2...

As stated before, each section should be underneath one another. The Videos section is separate from the accordion and Home is a part of the navigation list at the bottom of the page (serves as the footer).

I've come to understand that this may be an issue with my CSS for everything else not accordion related. Since I have no idea what's the problem, I will just upload the entire CSS (which is about the same length as the accordion CSS)... if of course, that is 'okay'.