Accordion.Multiple Demo

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

<body>
  <div class="wrapper">
    <h1>jQueryUI.Accordion.Multiple Demo</h1>
    <div class="config">
      <label>
        <input type="checkbox" name="multiple" checked> Multiple</label>
      <label>
        <input type="checkbox" name="collapsible" checked> Collapsible</label>
    </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>
     ...

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;
}