Accordion.Multiple Demo 2

Accordion.Multiple Demo

by firegroove

HTML

<script src="https://github.com/asleepwalker/jquery-ui.accordion.multiple"></script>
<link rel="stylesheet" href="https://asleepwalker.github.io/jquery-ui.accordion.multiple/vendor/jquery-ui.custom/jquery-ui.min.css">
<link rel="stylesheet" href="https://asleepwalker.github.io/jquery-ui.accordion.multiple/vendor/jquery-ui.custom/jquery-ui.structure.min.css">
<link rel="stylesheet" href="https://asleepwalker.github.io/jquery-ui.accordion.multiple/vendor/jquery-ui.custom/jquery-ui.theme.min.css">
<script src="https://asleepwalker.github.io/jquery-ui.accordion.multiple/vendor/jquery/jquery.min.js"></script>
<script src="https://asleepwalker.github.io/jquery-ui.accordion.multiple/vendor/jquery-ui.custom/jquery-ui.min.js"></script>
<script src="https://asleepwalker.github.io/jquery-ui.accordion.multiple/assets/jquery-ui.accordion.multiple.js"></script>
<title>
  jQueryUI.Accordion.Multiple Demo</title>

<div class="wrapper">
  <h1>jQueryUI.Accordion.Multiple Demo</h1>
  <div class="config">
    <label>
      <input type="checkbox" name="multiple" checked> Solo</label>

    <label>
      <input type="button" name="expand_all">Expand All
    </label>

    <label>
      <input type="button" name="collapse_all">Collapse All
    </label>

    <!--  <label>
        <input type="checkbox" name="collapsible" checked> Collapsible</label> -->

    <button type="button" class="open">OPEN ALL</button>
    <button type="button" class="close">CLOSE ALL</button>
  </div>


  <div id="accordion">
    <h3>Section 1</h3>
    <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>
    <h3>Section 2</h3>
    <div>
      <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus...

CSS

.wrapper {
  margin: 0 auto;
  max-width: 600px;
  padding: 0 50px;
}

.config {
  margin-bottom: 8px;
}

.config label {
  margin-right: 10px;
}

.ui-accordion {
  font-size: 80%;
}

.ui-accordion-header-icon {
  display: none;
}

.ui-accordion-header.ui-accordion-icons {
  padding-left: .7em;
}

.ui-accordion-content {
  padding: 0em 1em !important;
}

a.repo {
  text-decoration: none;
}

a.repo:hover {
  text-decoration: underline;
}

JavaScript

<!-- BEGIN MULTI ACCORDION -->
$(function() {

  $('#accordion').accordion({
    collapsible: true,
    multiple: false,
    heightStyle: "content"
  });

  $('input[type=checkbox]').change(function() {
    $('#accordion').accordion('option', $(this).attr('name'), !$(this).prop('checked'));
  });
});
<!-- EOF -->

<!-- Open All | Close All -->
$(function() {
  $("#accordion").accordion({
    collapsible: true,
    active: false
  });
  var icons = $("#accordion").accordion("option", "icons");
  $('.open').click(function() {
    $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({
      'aria-selected': 'true',
      'tabindex': '0'
    });
    $('.ui-accordion-header-icon').removeClass(icons.header).addClass(icons.headerSelected);
    $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({
      'aria-expanded': 'true',
      'aria-hidden': 'false'
    }).show();
    $(this).attr("disabled", "disabled");
    $('.close').removeAttr("disabled");
  });
  $('.close').click(function() {
    $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({
      'aria-selected': 'false',
      'tabindex': '-1'
    });
    $('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header);
    $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({
      'aria-expanded': 'false',
      'aria-hidden': 'true'
    }).hide();
    $(this).attr("disabled", "disabled");
    $('.open').removeAttr("disabled");
  });
  $('.ui-accordion-header').click(function() {
    $('.open').removeAttr("disabled");
    $('.close').removeAttr("disabled");

  });
});