Accordion.Multiple Demo 2

Accordion.Multiple Demo

by firegroove

HTML

<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.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 hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>
    </div>
    <h3>Section 3</h3>
    <div>
      <p>Nam enim...

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: 1.7em; /**** HEADER MARGIN ****/
}

.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'));
  });
	
	
	 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");

  });
	
	
});
<!-- EOF -->