Question

I am trying to relocate a div – the expandable panel with the header ‘Why Bother’, so it appears where you see it now in the display (at the bottom). But in the HTML, I want it to appear at the top of the 8 panels.

(These panels are located all down the RH side of the content area. And I am doing this to retain the current sites SEO, which is where the guy who I am building this for makes 99% of his money).

http://dev.assessmentday.co.uk/index.htm

I have tried using bottom:0; but this will not work with the expandable panels. Is there a way to do this using CSS or JS?

Answer 1

If you you want it to appear at the top for SEO reasons, then you are going to have to move it to the top in your HTML code. Moving it after the DOM loads (with either JS or CSS) will have no effect on it’s SEO, as the SEO spiders will read the DOM the way it appears in the original HTML.

Once you have moved it to the top, you can then move it to the bottom using javascript, so that it appears to be at the bottom.

Assuming it is the first div element in <div class="contentLeft" with the class dropdownPanel , You could use the following jQuery:

$(document).ready(function(){
    $('div.dropdownPanel:first').appendTo('#content div.contentLeft');
});

Here is a working example:

http://jsbin.com/ezizix/1/edit

I noticed on your site you have the $ shortcut for jQuery disabled, so be sure to replace it with jQuery:

jQuery('div.dropdownPanel:first').appendTo('#content div.contentLeft');