Expand and collapse issues.

Question

Hello,

I'm a rookie designer having a few troubles with this page: http://www.resolvegroup.co.nz/javasurvey.php

There are problems with the javascript operation of the expanded questions. For Internet Explorer (Version 7) the first question when expanded gets partly hidden under question 2. This happens to varying degrees with all questions, at times making the next question completely hidden and other problems.

Firefox (Version 3.03) does not have the problem as above, but you cannot get access to the explanations or select next question as in IE7.

Does anyone know what's going on with this, and how to fix it?

Answer 1

I'd recommend looking at using a pre-built Accordion script, like that built into the jQuery UI library: http://docs.jquery.com/UI/Accordion

---

Also, there's a few things I could suggest. This code of yours:

$(".score-list").slideUp(speed);
$(".score-list").removeClass("open");
$("a.open-answer").removeClass("hidden");
$(this).parent().children(".score-list").slideDown(speed);
$(this).parent().children(".score-list").toggleClass("open");
$(this).toggleClass("hidden");

could be made a lot more efficient by storing the results from a jQuery query, as well as taking advantage of jQuery's chaining abilities: quite a lot of jQuery's functions return the jQuery object itself, which means you can call a number of functions in a row without having to reference the object again and again. Here's what I mean:

$(".score-list")        // my own preference is to split the calls onto
    .slideUp(speed)     // multiple lines to make it easier to read.
    .removeClass("open")
;
$("a.open-answer").removeClass("hidden");

var $this = $(this);    // store the result from a query in an object so you
                        // don't have to go through that again.
$this
    .parent()
    .children(".score-list")
    .slideDown(speed);
    .toggleClass("open")
;
$this.toggleClass("hidden");

Answer 2

If I'm not mistaken, your CSS has some wonkiness. ".question-container h3" and ".question-container h3 span" have relative and absolute positioning, respectively. Internet Explorer does not handle out-of-flow positioning very well. In result, it gets confused and tries to place these elements in weird places.

Construct the accordion without relative or absolute positioning and it should work fine.

Answer 3

Awesome! thanks guys, it seems to work sweet now.