IRMA

Accordion 

<div class="accordion -collapsed">
    <button type="button" class="btn accordion-header js-accordion">
		<h4 class="accordion-title">
			<span class="text">General</span>
		</h4>
	</button>

    <div class="accordion-content">
        <div class="form-group">
            <div class="form-field">
                <label for="chrFieldName">Basic field</label>

                <input type="text" name="chrFieldName">
            </div>
        </div>
    </div>
</div>
 
<div class="accordion -collapsed">
	<button type="button" class="btn accordion-header js-accordion">
		<h4 class="accordion-title">
			<span class="text">General</span>
		</h4>
	</button>

	<div class="accordion-content">
		<div class="form-group">
			<div class="form-field">
				<label for="chrFieldName">Basic field</label>

				<input type="text" name="chrFieldName">
			</div>
		</div>
	</div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .accordion {
	margin-top: 7.5rem;

	transition: all $transition;

	&:first-child {
		margin-top: 0;
	}

	& + .accordion {
		margin-top: 5px;
	}

	&.-collapsed {
		.accordion-header {
			background: $color-irma-offwhite;

			&::after {
				transform: translate(-50%, -50%) rotate(-90deg);
			}
		}

		.accordion-content {
			height: 0;
			padding: 0 10rem;
		}
	}

	.accordion-header {
		position: relative;

		display: flex;
		width: 100%;
		align-items: center;
		height: 10rem;
		padding: 0 8rem;

		background: $color-irma-mint;

		&::after {
			content: '\f0d7';

			position: absolute;
			top: 50%;
			left: 5rem;
			transform: translate(-50%, -50%);

			@include font-icon;
			@include font-size-other(14px);

			transition: all $transition;
		}

		.accordion-title {
			text-transform: uppercase;
		}	
	}

	.accordion-content {
		overflow: hidden;
		padding: 7.5rem;
	}
}
  • URL: /components/raw/accordion/_accordion.scss
  • Filesystem Path: components/01-components/accordion/_accordion.scss
  • Size: 878 Bytes
  • Content: 
    /* 
 *	_accordion.js
 */

irma.accordion = (function () {
	'use strict';

	var init = function () {
		$(document).on('click', '.js-accordion', function () {
			$(this).closest('.accordion').toggleClass('-collapsed');

		}).on('click', '.js-accordion-expand', function () {
			var name = $(this).data().accordion;

			var $accordions = $('.accordion-group').filter(function () {
				return $(this).data().accordion == name;
			}).find('.accordion');

			$accordions.removeClass('-collapsed');

		}).on('click', '.js-accordion-collapse', function () {
			var name = $(this).data().accordion;

			var $accordions = $('.accordion-group').filter(function () {
				return $(this).data().accordion == name;
			}).find('.accordion');

			$accordions.addClass('-collapsed');
		});
	};

	return {
		init: init
	};

}());
  • URL: /components/raw/accordion/accordion.js
  • Filesystem Path: components/01-components/accordion/accordion.js
  • Size: 810 Bytes

There are no notes for this item.