Как реализовать смену виджетов Jquery UI?

Question

[Виталий]

Использую jQuery UI
Задача такая.
Мне надо, чтоб при размере экрана 992рх и больше - отрабатывали табы, а при размере меньше 992 - отрабатывал аккордион
Разметка html:

<div id="tabs" class="accordion">
    <ul class="row">
	<li class="col-sm-6 col-md-3"><a href="#tab_1"><button>Кнопка1</button></a></li>
	<li class="col-sm-6 col-md-3"><a href="#tab_2"><button>Кнопка1</button></a></li>
	<li class="col-sm-6 col-md-3"><a href="#tab_3"><button>Кнопка1</button></a></li>
    </ul>
    <div id="tab_1"
         Тут теги p, слайдеры и прочий контент
    </div>
    <div id="tab_2"
         Тут теги p, слайдеры и прочий контент
    </div>
    <div id="tab_3"
         Тут теги p, слайдеры и прочий контент
    </div>

if (window.width > 992) {
		$('#tabs').tabs();
	}
	else {
		$('#tabs').tabs('destroy');
		$('.accordion').accordion();
	}

Такая инструкция в js файле не дала результат. Помогите, кто знает.
Спасибо.

Comments

[Arman]

обновлять страницу при меньше 992 пробовали?

[Виталий]

Arik: да

Answer 1

[Рюрик Ростиславич]

Ух
Все ведь можно сделать проще

$(function(){
                    var $togglers = $('.services-list-togglers').on('click touchstart', '.toggler', function(){
                        var type = $(this).data('type');
                        $('.services-list').addClass('hide').filter('.services-list-'+type).removeClass('hide');
                    });
                });

Comments

[Виталий]

что это?