Accordion - Expand/Collapse multiple sections

HTML

<select id="survey">
  <option value="all">All</option>
  <option value="bronze">Bronze</option>
  <option value="silver">Silver</option>
  <option value="gold">Gold</option>
</select>
<a class="accordion-expand-all" href="#" target="_self">Open/Close All</a>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1" class="all bronze silver gold">Performance</a></li>
        <li><a href="#tabs-2" class="all bronze">Bronze</a></li>
        <li><a href="#tabs-3" class="all silver">Silver</a></li>
        <li><a href="#tabs-4" class="all gold silver">Gold</a></li>
    </ul>
    <div id="tabs-1">
        <div id="accordion">
            <h3>Accordion 1-1</h3>
            <div>
                Lorem Ipsum</div>
            <h3>Accordion 1-2</h3>
            <div>
                Lorem Ipsum</div>
            <h3>Accordion 1-3</h3>
            <div>
                Lorem Ipsum</div>
        </div>
        <!-- /div accordion -->
    </div>
    <!-- /div tabs-1 -->

    <div id="tabs-2">
        <div id="accordion2">
            <h3>Accordion 2-1</h3>
            <div>
                Lorem Ipsum</div>
            <h3>Accordion 2-2</h3>
            <div>
                Lorem Ipsum</div>
            <h3>Accordoin 2-3</h3>
            <div>
                Lorem Ipsum</div>
        </div>
        <!-- /div accordion2 -->
    </div>
    <!-- /div tabs-2 -->

    <div id="tabs-3">
        <div id="accordion3">
            <h3>Accordion 3-1</h3>
            <div>
                Lorem Ipsum</div>
            <h3>Accordion 3-2</h3>
            <div>
                Lorem Ipsum</div>
            <h3>Accordoin 3-3</h3>
            <div>
                Lorem Ipsum</div>
        </div>
        <!-- /div accordion3 -->
    </div>
    <!-- /div tabs-3 -->

    <div id="tabs-4">
        <div id="accordion4">
            <h3>Accordion 4-1</h3>
            <div>
                Lorem Ipsum</div>
            <h3>Accordion 4-2</h3>
            <div>
                Lorem Ipsum</div>
    ...

JavaScript

$("#accordion").accordion({
    collapsible: true,
    heightStyle: "content",
    navigation: true,
    active: true
});

$("#accordion2").accordion({
    collapsible: true,
    heightStyle: "content",
    navigation: true,
    active: true
});

$("#accordion3").accordion({
    collapsible: true,
    heightStyle: "content",
    navigation: true,
    active: true
});

$("#accordion4").accordion({
    collapsible: true,
    heightStyle: "content",
    navigation: true,
    active: true
});

$("#tabs").tabs();
$("#tooltip").tooltip();
$(".selector").tooltip({
    open: function(event, ui) {
        ui.tooltip.css("max-width", "50px");
    }
});

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

// Getter for tooltip
var position = $(".selector").tooltip("option", "position");
// Setter for tooltip
$(".selector").tooltip("option", "position", {
    my: "left top+15",
    at: "left top"
});
var headers = $('#accordion .accordion-header');
var contentAreas = $('#accordion .ui-accordion-content ').hide();
console.log(contentAreas)
var expandLink = $('.accordion-expand-all');
// add the accordion functionality
headers.click(function() {
    var panel = $(this).next();
    var isOpen = panel.is(':visible');
    // open or close as necessary
    panel[isOpen ? 'slideUp' : 'slideDown']()
        // trigger the correct custom event
        .trigger(isOpen ? 'hide' : 'show');
    // stop the link from causing a pagescroll
    return false;
});

$("#survey").on("change", function(){
	alert($(this).val());
  var section = "."+$(this).val();
  $(".all").hide();
  $(section).show();
});

// hook up the expand/collapse all
expandLink.click(function () {
    $("#accordion, #accordion2, #accordion3, #accordion4").accordion( "option", "active", false )
    $(".ui-accordion-header").blur();
});
// when panels open or...