New web

Web pattern library, style and technical reference

Content Components

Accordion

Default

Accordions can be created within the CMS by web publishers without neededing to know or understand the css and html strucutres that define them. An accordion can be added to a page by nesting in an approiate folder and appying the correct paint layout #225018, for further information on creating accordions within the CMS please refer to the web support portal and training materials.

Accordion panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accordion panel title

Publisher CSS JS HTML

Publishers can create an accordion in the Easy Edit interface.

Create a folder, this will contain your accordion items
Create standard pages within the folder, each page will one item within your accordion
Nest the folder into the page on whcih you wish for the accordion to appear on
Apply the accordion paint layout by selecting "Accordion" from the available options
Make sure you send everthing off for approval, and then make it live!

/*********************************/
/**  UON Accordion              **/
/**  -- March 2018              **/
/**  -- Dean Robinson (djr145)  **/
/*********************************/

.uon-accordion {margin:20px 0;border:1px solid #C6CAD1;border-radius:4px;overflow:hidden;}
.uon-accordion:first-child {margin-top:0;}
.uon-accordion:last-child {margin-bottom:0;}
.uon-accordion-panel {border-top:1px solid #C6CAD1;}
.uon-accordion-panel:first-child {border-top:0 none;}
.uon-accordion-title {font-size:16px;font-weight:bold;}
h3.uon-accordion-title {margin:0;}
.uon-accordion-title a {padding:10px 40px 10px 20px;color:#5B6270;text-decoration:none;display:block;position:relative;transition:0.1s all;}
.uon-accordion-panel.open > .uon-accordion-title a {background:#FFF;color:#2D3138;padding:20px 40px 20px 20px;font-size:20px;}
.uon-accordion-title a:before {font-family:fontawesome;position:absolute;top:10px;right:20px;font-size:18px;transition:0.1s all;transform:rotate(90deg);content:"\f105";}
.uon-accordion-panel.open > .uon-accordion-title a:before {transform:rotate(0deg);content:"\f105";top:24px;}
.uon-accordion-title a:hover {background:#ECEDEF;color:#1090D5;}
.uon-accordion-panel.open > .uon-accordion-title a:hover {color:#1090D5;background:#FFF;text-decoration:none;}
.uon-accordion-panel.open > .uon-accordion-title > a:after {background:#D9DBE0;border-radius:3px;bottom:-1px;content:"";height:3px;left:20px;position:absolute;width:20%;}
.uon-accordion-content {display:none;padding:20px;overflow:hidden;}
.uon-accordion-panel.open > .uon-accordion-content {background:#FFF;}

@media screen and (max-width:600px) {
	.uon-accordion-title {font-size:14px;line-height:1.2;}
	.uon-accordion-title a {padding:10px 30px 10px 10px;}
	.uon-accordion-title a:before {right:10px;}
}

@media(max-width:500px) {
/*	.uon-accordion {margin:20px -20px;}*/
	.uon-accordion-title a {padding-right:40px;padding-left:20px;}
	.uon-accordion-panel.open > .uon-accordion-title a {padding-right:40px;padding-left:20px;}
	.uon-accordion-title a:before {right:20px;}
	.uon-accordion-content {padding:0px 20px 20px 20px;}
}

#uon-lightbox-content .uon-accordion-panel.open > .uon-accordion-title > a:after {left:40px;}
#uon-lightbox-content .uon-accordion .uon-accordion-content {padding-top:20px;}


/**************************/
/**  Decision accordion  **/
/**************************/

.decision-accordion .uon-accordion {margin:30px 0;border:0 none;}
.decision-accordion .uon-accordion .uon-accordion {margin:0 0 0;}
.decision-accordion .uon-accordion-panel {border:0 none;}
.decision-accordion .uon-accordion-title {font-weight:normal;}
.decision-accordion .uon-accordion-title a {padding:10px 0 10px 40px;}
.decision-accordion .uon-accordion-content {padding:10px 0 20px 40px;}
.decision-accordion .uon-accordion-title a::before {right:auto;left:12px;top:11px;font-size:18px;content:"\f10c";transform:none;font-weight:normal;}
.decision-accordion .uon-accordion-panel.open > .uon-accordion-title a:before {content:"\f05d";top:11px;color:#0C6;}
.decision-accordion .uon-accordion-panel.open > .uon-accordion-title {font-size:16px;font-weight:bold;}
.decision-accordion .uon-accordion-panel.open > .uon-accordion-title a {padding:10px 0 10px 40px;font-size:16px;}
.decision-accordion .uon-accordion-panel.open > .uon-accordion-title > a::after {left:40px;}


/*************************************/
/**  Accordion Table                **/
/**  - used with uon-dates-listing  **/
/*************************************/

.uon-accordion-table {margin:0;border:0 none;}
.uon-accordion-table .uon-accordion-panel {border-top:0 none;}
.uon-accordion-table .uon-accordion-panel:last-child table {margin-bottom:0;}
.uon-accordion-table table {width:100%;border-collapse:collapse;margin-bottom:20px;}
.uon-accordion-table .uon-accordion-panel.open {margin-bottom:40px;}
.uon-accordion-table .uon-accordion-panel > .uon-accordion-title a {padding:0;background:none;}
.uon-accordion-table .uon-accordion-panel.open > .uon-accordion-title a {padding:0 0 10px;background:none;}
.uon-accordion-table .uon-accordion-panel.open > .uon-accordion-title a {font-size:24px;}
.uon-accordion-table .uon-accordion-title a::before, .uon-accordion-table .uon-accordion-panel.open > .uon-accordion-title a::before {right:0;top:4px;}
.uon-accordion-table .uon-accordion-panel > .uon-accordion-content {padding:0;}
.uon-accordion-table .uon-accordion-panel.open > .uon-accordion-content {background:none;}
.uon-accordion-table .uon-accordion-panel + .uon-accordion-panel.open {margin-top:40px;}

/*********************************/
/**  UON Accordion              **/
/**  -- March 2018              **/
/**  -- Dean Robinson (djr145)  **/
/*********************************/

var uonAccordion;

uonAccordion = function(s) {

	$(s).on('click',function(event){
		event.preventDefault();
		if($(this).parentsUntil('.uon-accordion').parent().hasClass('uon-accordion-multiple')) { // Multiple sections open
			$(this).parentsUntil('.uon-accordion').toggleClass('open').next('.uon-accordion-content').slideToggle(100,function(){
				if(container) {
					container.isotope('layout');
				}
			});
		} else { // Single section open
			if(!$(this).parentsUntil('.uon-accordion').last().hasClass('open')) {
				$(this).parentsUntil('.uon-accordion').last().parent().find('> .uon-accordion-panel.open').toggleClass('open').find('> .uon-accordion-content').slideToggle(100);
			}
			$(this).parentsUntil('.uon-accordion').last().toggleClass('open');
			$(this).parentsUntil('.uon-accordion-panel').next('.uon-accordion-content').slideToggle(100,function(){
				if(container) {
					container.isotope('layout');
				}
			});
		}
	});

};

uonAccordion('.body-content .uon-accordion-title a');

<div class="uon-accordion">
  <div class="uon-accordion-panel">
    <div class="uon-accordion-title">
      <a href="#">Accordion panel title</a>
    </div>
    <div class="uon-accordion-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing…</p>
    </div>
  </div>
  <div class="uon-accordion-panel">
    <div class="uon-accordion-title">
      <a href="#">Accordion panel title</a>
    </div>
    <div class="uon-accordion-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing…</p>
    </div>
  </div>
  <div class="uon-accordion-panel">
    <div class="uon-accordion-title">
      <a href="#">Accordion panel title</a>
    </div>
    <div class="uon-accordion-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing…</p>
    </div>
  </div>
</div>

Decision

Accordion panel title

<div class="decision-accordion">
  <div class="uon-accordion">
    <div class="uon-accordion-panel">
      <div class="uon-accordion-title">
        <a href="#">Accordion panel title</a>
      </div>
      <div class="uon-accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing…</p>
      </div>
    </div>
    <div class="uon-accordion-panel">
      <div class="uon-accordion-title">
        <a href="#">Accordion panel title</a>
      </div>
      <div class="uon-accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing…</p>
      </div>
    </div>
    <div class="uon-accordion-panel">
      <div class="uon-accordion-title">
        <a href="#">Accordion panel title</a>
      </div>
      <div class="uon-accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing…</p>
      </div>
    </div>
  </div>
</div>