Адаптивный аккордеон

День добрый, уважаемые форумчане!
Нужна помощь, делаю сайт. В футере: при ширине экрана < 320px должен появится “аккордеон”. он появляется все работает и по этой части вопросов нет. А вот при большем разрешении данный аккордеон должен трансформироваться в “таблицу”(несколько столбцов данных) и аккордеон делается неактивным. С активностью/неактивностью аккордеона проблем нет. А вот с корректной версткой данного списка при большой ширине экрана проблемы.
вот что получается http://jsfiddle.net/wm6ddahx/.
вопрос: что надо “сделать”, чтобы подпункты списка отображались под своим “title” ??

Для начала сделайте валидной верстку (у вас у ul есть дочерние элементы ul), тогда сможете манипулировать элементами, меняя position:absolute на relative.

1 лайк

Не совсем понимаю…Разве не может такого быть, что внутри одного списка, лежит другой (например выпадающее меню, вложенный список и т.д.). Вы можете сказать, что имеете в виду или просто написать как должно быть?

Может быть список внутри списка, но должно быть

<ul>
    <li>
        <ul>
            <li></li>
        </ul>
    </li>
</ul>

Согласен. Все верно.Так тоже можно)))
Но при такой верстке не работает “аккордеон”.
Может тогда подскажите как делается “аккордеон”.
может я изначально неправильно все начал делать?!

Урааа!!! Переписал код и скрипт и все заработало))

    <li>Title 2</li>
"

и скрипт

var hide = function() {
if ($(window).width() <= 320) {
$(’#accordion > li span’).click(function() {
if(false == $(this).next().is(’:visible’)) {
$(’#accordion > ul’).slideUp(300);
}
$(this).next().slideToggle(300);
});
$(’#accordion > ul:eq(0)’).show();
} else {
$("#accordion > li span").unbind(‘click’);
}
};
hide();
$(window).resize(hide);