Hello, I'm struggling with implementing a jQuery accordion for mobile platforms that destroys itself on larger screens. While my code is mostly working, I've encountered two issues:
The accordion only gets destroyed when the window is resized, not when the document loads.
Once the accordion is destroyed, I can't get it to work again when resizing back to mobile sizes.
Here's the code snippet in question:
<div class="content-wrap">
<div class="container">
<div class="row">
<div class="content-fill">
<div class="content">
<div class="testimonials col-md-6 col-lg-6">
<h1>section 1</h1>
<p>this is a paragraph</p>
</div>
<div class="social col-sm-6 col-md-3 col-lg-3">
<h1>section 2</h1>
<div class="social-wrap">
<a class="twitter-timeline" width="100%" data-chrome="transparent noscrollbar" href="https://twitter.com/xxxxxx" data-widget-id="383311602641952769">Tweets by @xxxxxx</a>
</div>
</div>
<div class="news col-sm-6 col-md-3 col-lg-3">
<h1>section 3</h1>
<p>this is a paragraph</p>
</div>
</div>
</div>
</div>
</div>
</div>
// <![CDATA[
var $ = jQuery.noConflict(); $(document).ready(function()
{
$('.content').addClass('accordion');
$(window).resize(function() {
if ($('.social').css('float') == 'left') {
$('.content').accordion('destroy');
} else if($('.social').css('float') == 'none') {
$('.content').accordion('enable');
}
});
$(".accordion").accordion({
collapsible: true,
header: "h1",
heightStyle: "fill",
});
//getter variables
var collapsible = $(".accordion").accordion("option","collapsible");
var header = $(".accordion").accordion("option","header");
var heightStyle = $(".accordion").accordion("option","heightStyle");
$('.carousel').carousel({ interval: 4000, cycle: true });
}); // ]]>