<ul class="c-accordion">
<li class="c-accordion__item">
<button class="c-accordion__header is-open">
<span class="c-accordion__header-title">Item 1</span>
</button>
<div class="c-accordion__content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum a ab quae quas optio ut officia quia? Modi at impedit dolorem est voluptatem facilis, beatae atque tenetur, soluta dolorum inventore sapiente laborum. Alias esse soluta porro distinctio
aperiam, qui suscipit.
</div>
</li>
<li class="c-accordion__item">
<button class="c-accordion__header">
<span class="c-accordion__header-title">Item 2</span>
</button>
<div class="c-accordion__content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum a ab quae quas optio ut officia quia? Modi at impedit dolorem est voluptatem facilis, beatae atque tenetur, soluta dolorum inventore sapiente laborum. Alias esse soluta porro distinctio
aperiam, qui suscipit.
</div>
</li>
<li class="c-accordion__item">
<button class="c-accordion__header">
<span class="c-accordion__header-title">Item 3</span>
</button>
<div class="c-accordion__content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum a ab quae quas optio ut officia quia? Modi at impedit dolorem est voluptatem facilis, beatae atque tenetur, soluta dolorum inventore sapiente laborum. Alias esse soluta porro distinctio
aperiam, qui suscipit.
</div>
</li>
</ul>
<ul class="c-accordion">
{{#each item}}
<li class="c-accordion__item{{#if noCounter}} c-accordion__item--no-counter{{/if}}">
<button class="c-accordion__header{{#if open}} is-open{{/if}}">
<span class="c-accordion__header-title">{{itemTitle}}</span>
</button>
<div class="c-accordion__content">
{{#if inventoryTable}}
{{#if correct}}
{{#each selectedItem}}
<div class="o-stack--xs">
<h4 class="o-heading--sm">{{groupHeading}}</h4>
<div class="c-table__wrapper c-table--fix-col-1--right c-table--qty-fix o-grid">
<table class="c-table{{#if tableClass }} {{tableClass}}{{/if}}">
<thead class="c-table__header">
<tr class="c-table__header__row">
{{#each tableHeaderItem }}
<th class="c-table__header__item">{{ this }}</th>
{{/each }}
<th class="c-table__header__item">Quantity</th>
</tr>
</thead>
<tbody class="c-table__body">
{{#each tableBodyRow }}
<tr class="c-table__body__row">
{{#each tableBodyItem }}
<td class="c-table__body__item">{{ tableBodyItemText }}</td>
{{/each }}
<td class="c-table__body__item">
<a class="c-btn--plus-minus" data-ember-action="" data-ember-action-1027="1027"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"> </path> </svg></a>
<input type="text" value="10" class="c-input c-input--sm c-input--qty ember-text-field ember-view">
<a class="c-btn--plus-minus" data-ember-action="" data-ember-action-1027="1027"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"> </path> </svg></a>
<div class="c-table--qty-fix__actions"><a class="select-action-link">Save</a></div>
</td>
</tr>
{{/each }}
</tbody>
</table>
</div>
</div>
{{/each}}
{{/if}}
{{#if newMaterial}}
<!-- Table for new material starts -->
<div class="c-table__wrapper">
<table class="c-table">
<thead class="c-table__header">
<tr class="c-table__header__row">
{{#each tableHeaderItem }}
<th class="c-table__header__item">{{ this }}</th>
{{/each }}
</tr>
</thead>
<tbody class="c-table__body">
<tr class="c-table__body__row">
{{#each tableBodyItem }}
<td class="c-table__body__item">
<!-- Input power select starts -->
<!-- Plugin markup -->
<div id="ember2945" class="tag-field c-input--power-select ember-view">
<div id="ember2946" class="ember-view">
<div id="ember2947" class="ember-view">
<div aria-owns="ember-basic-dropdown-content-ember2948" tabindex="-1" data-ebd-id="ember2948-trigger" role="button" id="ember2949" class="ember-power-select-trigger ember-power-select-multiple-trigger ember-basic-dropdown-trigger ember-view">
<ul id="ember-power-select-multiple-options-ember2948" class="ember-power-select-multiple-options">
<input type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" id="ember-power-select-trigger-multiple-input-ember2948" aria-controls="ember-power-select-options-ember2948"
style="width: 100%;" placeholder="{{placeholder}}" class="ember-power-select-trigger-multiple-input">
</ul>
<span class="ember-power-select-status-icon"></span>
</div>
<div id="ember-basic-dropdown-content-ember2948" style="display: none;" class="ember-basic-dropdown-content-placeholder"></div>
</div>
</div>
</div>
<!-- Input power select ends -->
</td>
{{/each }}
</tr>
</tbody>
</table>
</div>
<!-- Table for new material ends -->
{{/if}}
{{#if assign}}
<div class="o-grid">
<h4 class="o-heading--sm">Sucker Rod</h4>
<div class="u-p-relative">
{{render '@table--assigning-att'}}
</div>
</div>
{{/if}}
{{else}}
{{itemContent}}
{{/if}}
</div>
</li>
{{/each}}
</ul>
{
"item": [
{
"itemTitle": "Item 1",
"itemContent": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum a ab quae quas optio ut officia quia? Modi at impedit dolorem est voluptatem facilis, beatae atque tenetur, soluta dolorum inventore sapiente laborum. Alias esse soluta porro distinctio aperiam, qui suscipit.",
"open": "yes"
},
{
"itemTitle": "Item 2",
"itemContent": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum a ab quae quas optio ut officia quia? Modi at impedit dolorem est voluptatem facilis, beatae atque tenetur, soluta dolorum inventore sapiente laborum. Alias esse soluta porro distinctio aperiam, qui suscipit."
},
{
"itemTitle": "Item 3",
"itemContent": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum a ab quae quas optio ut officia quia? Modi at impedit dolorem est voluptatem facilis, beatae atque tenetur, soluta dolorum inventore sapiente laborum. Alias esse soluta porro distinctio aperiam, qui suscipit."
}
]
}
.c-accordion {
list-style-type: none;
}
.c-accordion__item {
position: relative;
counter-increment: step-counter;
&::before {
z-index: 10;
position: absolute;
padding: $space-xxxs 0 0 $space-xxs;
@include text-preset-4--sm;
color: $color-brand-secondary-900;
font-variant-numeric: lining-nums;
font-weight: 900;
content: counter(step-counter)'-';
}
& + & {
margin-top: $space-xs;
}
}
.c-accordion__item--no-counter {
counter-increment: none;
&::before {
content: none;
}
.c-accordion__header {
padding: $space-xxxs $space-xxxs $space-xxxs $space-xxs;
}
}
.c-accordion__header {
display: block;
position: relative;
width: 100%;
padding: $space-xxxs $space-xxxs $space-xxxs rem(26);
border: 0;
border-radius: $global-radius;
background-color: $color-grey-200;
text-align: left;
cursor: pointer;
transition: $global-transition;
@include hocus() {
background-color: darken($color-grey-200, 5%);
}
&::after {
display: block;
position: absolute;
top: 35%;
right: $space-md;
width: $space-xs;
height: $space-xs;
transform: rotate(135deg);
border-top: rem(2) solid;
border-left: rem(2) solid;
border-color: rgba($color-grey-600, 0.8);
content: '';
}
&.is-open {
background: lighten($color-grey-200, 2%);
&::after {
top: 30%;
transform: rotate(-135deg);
border-color: $color-grey-600;
}
}
}
// ACCORDION PLUGIN
.is-active {
.c-accordion__header {
background: lighten($color-grey-200, 2%);
&::after {
top: 30%;
transform: rotate(-135deg);
border-color: $color-grey-600;
}
}
}
.c-accordion__header-title {
@include text-preset-4--sm;
color: $color-brand-secondary-900;
}
.c-accordion__content {
display: none;
padding: $space-unit $space-xs;
> * + * {
margin-top: $space-unit;
}
.is-open + & {
display: block;
}
> * {
min-width: 100%;
}
}
var parentNav = document.querySelectorAll('.c-accordion .c-accordion__header');
for (var i = 0, l = parentNav.length; i < l; i++) {
parentNav[i].onclick = function() {
parentNav.forEach(function(elem) {
elem.classList.remove("is-open");
});
element = this;
if (element.classList.contains("is-open")) {
element.classList.remove("is-open");
} else {
element.classList.add("is-open");
}
return false;
}
}
There are no notes for this item.