JQuery UI Accordion 2

JQ Accordion

by designworksinteractive

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <button id='btnExternal1' style="background-color:transparent;border:none;" class='btnTogs'>filter</button>  <button id='btnExternal2' style="background-color:transparent;border:none;" class='btnTogs'>filter</button>  <button id='btnExternal3' style="background-color:transparent;border:none;" class='btnTogs'>filter</button>
  
<div id="accordion">
  <!-- 1st Panel -->
  <div class='collapse'>
    <div class="one">Section 1</div>
    <div class="two">Icon</div>
    <!-- <button class="three">Button</button> -->
  </div>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum
      a velit eu ante scelerisque vulputate.</p>
  </div>
  

  <!-- 2nd Panel -->
  <div class='collapse'>
    <div class="one">Section 2</div>
    <div class="two">Icon</div>
    <!-- <button class="three">Button</button> -->
  </div>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum
      a velit eu ante scelerisque vulputate.</p>
  </div>

  <!-- 3rd Panel -->
  <div class='collapse'>
    <div class="one">Section 3</div>
    <div class="two">Icon</div>
    <!-- <button class="three">Button</button> -->
  </div>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio....

JavaScript

//$(function() {
$("#accordion").accordion({
  header: ".collapse",
  collapsible: true,
  active: false
});

$(".collapse .one, .collapse .two").click(function() {
  return false;
});

$(".btnTogs").click(function() {

  if ($(this).text() == "filter") {
    $('#accordion').accordion({
      active: $(".btnTogs").index(this)
    });
    //$(this).text("Close");
  } else if ($(this).text() == "Close") {
    $('#accordion').accordion({
      active: false
    });
    //$(this).text("Open");
  }
})

$('#accordion').on("accordionactivate", function(event, ui) {
  var testVal = $(this).accordion('option', 'active');
  if (testVal.toString() == "false") {
    $(".btnTogs").text("filter");
  }
  //$("#msg").text('2) Active tab index: ' + testVal);
  $(".btnTogs").each(function(index) {
    if (!isNaN(testVal)) {
      if (testVal.toString() == index.toString()) {
        $(this).text("Close")
      } else {
        $(this).text("filter")
      }
    }
  });

});

//});