How can I prevent the answers of the questions from overlapping the other accordion?

Question

In the following link: http://jsfiddle.net/gCvbT/, if you click on General and then click on Question 1 for example, the answer overlaps FAQ 2. How can I prevent this?

Answer 1

Set the id of the h3 tag for the FAQ to "h3-faq" in order for the following code in the ready function to do the trick:

$(document).ready(function () {
    $("#general-questions")
      .accordion({ collapsible: true, active: false, autoHeight: false })
      .bind('accordionchangestart',function(event,ui){
        $('#h3-faq').animate({paddingTop: ui.newContent.height()}, 300);
      });
    $("#accordion")
      .accordion({ collapsible: true, active: false });
});

This will add appropriate padding to the top of the FAQ h3 on click. Notice I've also set autoHeight: false otherwise the height each content section will be set to the height of the largest content section and move the FAQ header down too much.