BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon

Accordion

Overview

Use to compress simple information that doesn’t include complex interactions. Has an expand/collapse feature.

Accordion

 

What Can I Expect After Reporting a Claim?

Benefits for Using a Participating, Network Dentist

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent est enim, gravida eu ligula nec, condimentum fermentum velit. Quisque molestie, dui et mollis tincidunt, mauris orci mattis risus, a ullamcorper diam orci at augue. Donec porta nunc libero, sed dignissim diam vestibulum fringilla. Curabitur tempor tempor turpis, eget tempor massa tempus a. Praesent in dignissim enim, eget accumsan nisl. Phasellus efficitur leo ut elit aliquet, quis egestas velit feugiat. Sed pulvinar velit lectus, vitae mattis erat sollicitudin bibendum. Donec ut tortor viverra, eleifend velit at, lobortis arcu. Mauris vel tempor mi, et lacinia nunc. Morbi bibendum ipsum nec sapien scelerisque venenatis.

How Long Will it Take to Approve my Claim?

Phasellus mattis tincidunt nibh.

Is my Benefit Taxable?

Nam dui erat, auctor a, dignissim quis.

For accordions used within a table, refer to Tables patterns.

  • Download Associated Javascripts:Zip
  • Download Associated Jquery Files:Zip


Hide Show CSS
                        
.ml-accordion-container {
	width: 100%;
	padding: 30px;
}
.ml-accordion-container h3 {
	text-align: left;
	padding: 25px 15px 25px 15px;
	height: 67px;
	margin: 0;
	cursor: pointer;
	color: #0061A0;
}
.ml-accordion-header {
	font-weight: 700;
	font-size: 14px;
	text-decoration: underline;
	border-bottom: 1px solid #999999;
	background: url(/assets/patterns/img/tables/expand.svg) no-repeat right 5px center;
	background-size: 28px;
}
.ml-accordion-header:after {
	content:"";
	float:right;
	margin-right:15px;
	font-size: 10px;
	font-weight:normal;
	color: #333333;
	text-decoration: none;
	text-transform:uppercase;
	letter-spacing:0.5px;
	line-height:1.4;		
}

.ml-accordion-header:hover {
	background: url(/assets/patterns/img/tables/expand-hover.svg) no-repeat right 5px center;
	background-size: 28px;
}
.ml-accordion-header:hover:after {
	content:"show more";
}
.expanded {
	text-decoration: none;
	background: url(/assets/patterns/img/tables/collapse.svg) no-repeat right 5px center;
	background-size: 28px;
    border-bottom: 0px solid #999999;
}
.expanded:hover {
	background: url(/assets/patterns/img/tables/collapse-hover.svg) no-repeat right 5px center;
	background-size: 28px;
}
.expanded:hover:after
{
content:"show less";

}
.ml-accordion-container h3:first-child {
	border-top: 1px solid #999999;
}
.ml-accordion-content {
	background: #ffffff;
	border-bottom: 1px solid #999999;
	padding: 25px 15px 25px 15px;
}
    
        
                            
HideShow HTML
                                                
<div id="accordion1" class="ml-accordion-container">
<h3 class="ml-accordion-header">What Can I Expect After Reporting a Claim?</h3>
<div class="ml-accordion-content">
<div ><strong>Benefits for Using a Participating, Network Dentist</strong></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent est enim, gravida eu ligula nec, condimentum fermentum velit. Quisque molestie, dui et mollis tincidunt, mauris orci mattis risus, a ullamcorper diam orci at augue. Donec porta nunc libero, sed dignissim diam vestibulum fringilla. Curabitur tempor tempor turpis, eget tempor massa tempus a. Praesent in dignissim enim, eget accumsan nisl. Phasellus efficitur leo ut elit aliquet, quis egestas velit feugiat. Sed pulvinar velit lectus, vitae mattis erat sollicitudin bibendum. Donec ut tortor viverra, eleifend velit at, lobortis arcu. Mauris vel tempor mi, et lacinia nunc. Morbi bibendum ipsum nec sapien scelerisque venenatis.
</p>

</div>
<h3 class="ml-accordion-header">How Long Will it Take to Approve my Claim?</h3>
<div class="ml-accordion-content">Phasellus mattis tincidunt nibh.</div>
<h3 class="ml-accordion-header">Is my Benefit Taxable?</h3>
<div class="ml-accordion-content">Nam dui erat, auctor a, dignissim quis.</div>
</div> <!-- ======== script ======== -->
<script>
$(document).ready(function() {

$('.ml-accordion-content').hide();
});

$('.ml-accordion-header').click(function (e) {

$(this).toggleClass("expanded").nextUntil('.ml-accordion-header').slideToggle();
});
</script>