In order to achieve the desired outcome, each Section should initially appear in a collapsed state. Panel 0 and 2 start off collapsed, however, panel 1 does not but can be collapsed upon clicking. Additionally, Panel 1 incorporates an iframe that displays live Twitter feed on the site.
See below for code examples:
HTML:
<div class="accordion">
<div class="testimonials col-md-6 col-lg-6">
<h1>section 1</h1>
<p>this is a div</p>
</div>
<div class="social col-sm-6 col-md-3 col-lg-3">
<h1>section 2</h1>
<a class="twitter-timeline" width="100%" data-chrome="transparent noscrollbar" href="https://twitter.com/xxxxxx" data-widget-id="999999">
Tweets by @xxxxxx
</a>
</div>
<div class="news col-sm-6 col-md-3 col-lg-3">
<h1>section 3</h1>
<p>this is a div</p>
</div>
Javascript
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
<script type="text/javascript">
// <![CDATA[
var $ = jQuery.noConflict(); $(document).ready(function()
{
$(".accordion").accordion({
active: false,
collapsible: true,
header: "h1"
});
//getter variables
var active = $(".accordion").accordion("option","active");
var collapsible = $(".accordion").accordion("option","collapsible");
var header = $(".accordion").accordion("option","header");
$('.carousel').carousel({ interval: 4000, cycle: true });
}); // ]]>