Jquery UI аккордеонный контент div скользит вверх

Я новичок в javascript и jquery. Я использую аккордеон пользовательского интерфейса jquery, найденный здесь

Что я пытаюсь сделать, так это заставить содержимое скользить вверх. Поэтому, используя приведенную выше ссылку в качестве примера, я хочу, чтобы содержимое раздела 1 было над заголовком «Раздел 1» после нажатия на него. Не снизу, как в режиме по умолчанию.

Здесь много вопросов об аккордеоне, но ни один из них, похоже, не касается содержания, скользящего вверх.

Чтобы придать этому некоторый контекст, я создал страницу архива в WordPress и пытаюсь добавить к содержимому «Подробнее». Я использую аккордеон пользовательского интерфейса jquery, чтобы отображать больше контента, а не переходить к отдельной публикации (поскольку WordPress делает это по умолчанию).

Аккордеон находится внутри запроса, поэтому у меня есть несколько аккордеонов на странице. Все работает. Я просто не могу понять, как перемещать содержимое вверх, а не вниз, как это происходит в настоящее время (т.е. операция по умолчанию)

<script>
jQuery(document).ready(function($) {
    var icons = {
      header: "icon-plus",
      activeHeader: "icon-minus"
    };
    $( ".accordion" ).accordion({
        collapsible: true, active: false, icons: icons
    });

    $( "#toggle" ).button().click(function() {
      if ( $( ".accordion" ).accordion( "option", "icons" ) ) {
        $( ".accordion" ).accordion( "option", "icons", null );
      } else {
        $( ".accordion" ).accordion( "option", "icons", icons );
      }
    }); 

    // Hover states on the static widgets
    $( "#dialog-link, #icons li" ).hover(
        function() {
            $( this ).addClass( "ui-state-hover" );
        },
        function() {
            $( this ).removeClass( "ui-state-hover" );
        }
    );
});
</script>

//РЕДАКТИРОВАТЬ

Я добавил приведенный выше код, как было предложено. Это немного отличается, потому что изначально я не мог заставить несколько аккордеонов работать на странице. Я нашел сообщение здесь, в котором предлагались изменения чтобы несколько аккордеонов работали на странице

Спасибо


person Fabs    schedule 20.11.2013    source источник
comment
Пожалуйста, опубликуйте код, который вы используете, и объясните, как и где вы его применяете.   -  person brasofilo    schedule 21.11.2013
comment
Используете ли вы функциональность по умолчанию, например: $( #accordion ).accordion();? Чтобы иметь возможность свернуть содержимое, вам нужно использовать это: $( #accordion ).accordion({ collapsible: true }); Из того же источника.   -  person Poornima    schedule 21.11.2013