Accordions
An accordion is used to show (and hide) content. Accordions differ from dropdowns in a couple of ways. When an accordion is opened its content pushes the page content down whereas dropdown content lays over existing page content. We use accordions in this design system for things like Current Inventory and Receipt Capture.
Inventory Accordions
Add a .disabled class to the .accordion .inventory class for any inventory items that have been submitted to the claim.
<div class="accordion inventory">
<input id="item-1" type="checkbox" name="items" class="accordion">
<label for="item-1">
<div class="item-number">Item Number: <span>0000</span></div>
<div class="item-header">
<div class="description"><span>Description</span><p>This is a long product description</p></div>
<div class="cost"><span>Cost</span><p>$000.00</p></div>
<div class="qty"><span>Qty</span><p>00</p></div>
</div>
</label>
<div class="item-details">
<form>
<fieldset>
<legend>Description</legend>
<div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
<span class="error-message">Please include a description</span>
<input type="text" name="description" id="description" placeholder="Describe your item (including brand)" value="This is a long product description">
<label for="description">Description*</label>
</div>
</fieldset>
<fieldset class="half">
<legend>Cost</legend>
<div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
<span class="error-message">Please include a cost per item</span>
<input type="text" name="cost" id="cost" placeholder="Cost per item" value="$000.00">
<label for="cost">Cost Per Item*</label>
</div>
</fieldset>
<fieldset class="half">
<legend>Quantity</legend>
<div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
<span class="error-message">Please include a quantity</span>
<input type="number" name="quantity" id="quantity" placeholder="Quantity" value="00">
<label for="quantity">Quantity*</label>
</div>
</fieldset>
<fieldset class="half">
<legend>Age: Years</legend>
<div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
<span class="error-message">How old is this item (in years)?</span>
<input type="number" name="years" id="years" placeholder="Years" value="00">
<label for="years">Age: In Years*</label>
</div>
</fieldset>
<fieldset class="half">
<legend>Age: Months</legend>
<div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
<span class="error-message">How old is this item (in months)?</span>
<input type="number" name="months" id="months" placeholder="Months" value="00">
<label for="months">Age: In Months*</label>
</div>
</fieldset>
<fieldset>
<legend>Condition</legend>
<div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
<span class="error-message">Please select an option</span>
<select name="condition" id="condition">
<option value="0">Choose a Condition</option>
<option value="New">New</option>
<option value="Excellent">Excellent</option>
<option value="Good">Good</option>
<option value="Fair">Fair</option>
<option value="Poor">Poor</option>
</select>
<div class="select-icon"><i class="la la-angle-down"></i></div>
<span class="valid select"><i class="la la-check-circle-o"></i></span>
<label for="condition">Condition</label>
</div>
</fieldset>
<div class="form-button-box">
<div class="form-button-box-row">
<div class="form-button-box-button">
<button class="button color-two"><span class="button-label">Add Attachments<span class="post"><span class="number">00</span></span></span></button>
</div>
<div class="form-button-box-row row">
<div class="form-button-box-button">
<button class="button secondary color-one"><span class="button-label">Save<span class="post"><span class="processing"><i class="la la-refresh la-spin"></i></span></span></span></button>
</div>
<div class="form-button-box-button">
<button class="button secondary color-one"><span class="button-label">Cancel</span></button>
</div>
</div>
</div>
<div class="form-button-box-button">
<div class="expanding-button-box color-one two">
<div class="expanding-button small click-two"><span class="trash-icon"><i class="la la-trash"></i></span></div>
<div class="expanding-button large click-two">Delete Item</div>
<div class="confirm-action-box">
<span class="confirm-action-text">Are you sure?</span>
<span class="confirm-action secondary no-two">No</span>
<span class="confirm-action yes-two">Yes</span>
</div>
</div>
</div>
</div>
</form>
</div>
</div>Receipt Capture Accordions
0000of0000items replaced
Receipt #1
- Amount Per Item:{000.00}
- Quantity Replaced:{0}
- Subtotal:{000.00}
Add a .disabled class to the .accordion .receipts class to any lines where all receipts have been submitted.
<div class="accordion receipts">
<input id="item-1" type="checkbox" name="items" class="accordion">
<label for="item-1">
<div class="item-number">Item Number: <span>0000</span></div>
<div class="item-header">
<div class="description"><span>Description</span><p>This is a really long product description</p></div>
<div class="replacement-count"><span>0000</span>of<span>0000</span>items replaced</div>
<div class="buttons">
<a class="button color-one small"><span class="button-label"><i class="la la-plus"></i></span></a>
<a class="button color-one large"><span class="button-label">Add</span></a>
</div>
</div>
</label>
<div class="item-details">
<div class="replacement-count"><span>0000</span>of<span>0000</span>items replaced</div>
<div class="message"><span class="submitted">You have submitted {0} receipt(s) for this line.</span><span class="added">You have added {0} receipt(s) for this line that you have not yet submitted.</span><span class="more">You can enter {0} more receipt(s) for this line.</span>
</div>
<div class="receipt">
<div class="receipt-number"><span>Receipt #1</span></div>
<div class="receipt-details">
<figure><img src="../../assets/images/target-coffee-table-highlighted.jpg" alt="Receipt Image"></figure>
<div class="receipt-control">
<ul>
<li><b>Amount Per Item:</b><span class="currency">{000.00}</span></li>
<li><b>Quantity Replaced:</b><span>{0}</span></li>
<li><b>Subtotal:</b><span class="currency">{000.00}</span></li>
</ul>
<div class="button-box">
<a class="button secondary color-one edit"><span class="button-label">Edit</span></a>
<div class="expanding-button-box item-one color-one" style="margin: 1rem 0 0 0;">
<div class="expanding-button small"><span class="trash-icon"><i class="la la-trash"></i></span></div>
<div class="expanding-button large">Delete</div>
<div class="confirm-action-box">
<span class="confirm-action-text">Are you sure?</span>
<span class="confirm-action secondary">No</span>
<span class="confirm-action">Yes</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>