Responsive Accordion

Thanks to the accordion, you can display a huge contents even in a limited amount of space. Responsee Accordion supports an unlimited number of nested accordions. Thanks to this, you can divide a content into more and more smaller parts.

Practical utilization of the responsive accordion you can find in the template Financer

If you want one of the accordion section to be open by default, use the class
“active-accordion-section”:

<div class="accordion-section active-accordion-section">...</div>

Correct structure of Accordion:

<div class="size-960">
<div class="line">
<div class="accordion">
<!-- Accordion section -->    
<div class="accordion-section">		
<h2 class="accordion-title">Main Heading</h2>								
<div class="accordion-content"> 
<p>Con nonummy sem integer interdum volutpat dis eget eligendi aliquip dolorum magnam. Lorem ipsum dolor si amet taciti sunt torquent ipsam proin montes quia netus quo minima sint. At aenean etiam suspendisse ultricies auctor per nihil nisi. Ullam fermentum urna varius et saepe labore dignissim consectetuer fusce elementum.</p>								                     	    		
</div>
</div>
<!-- Accordion section -->
<div class="accordion-section">		
<h2 class="accordion-title">Main Heading</h2>								
<div class="accordion-content"> 
<p>Con nonummy sem integer interdum volutpat dis eget eligendi aliquip dolorum magnam. Lorem ipsum dolor si amet taciti sunt torquent ipsam proin montes quia netus quo minima sint. At aenean etiam suspendisse ultricies auctor per nihil nisi. Ullam fermentum urna varius et saepe labore dignissim consectetuer fusce elementum.</p>								                     	    		
</div>
</div>
<!-- Accordion section -->
<div class="accordion-section">		
<h2 class="accordion-title">Main Heading</h2>								
<div class="accordion-content"> 
<p>Con nonummy sem integer interdum volutpat dis eget eligendi aliquip dolorum magnam. Lorem ipsum dolor si amet taciti sunt torquent ipsam proin montes quia netus quo minima sint. At aenean etiam suspendisse ultricies auctor per nihil nisi. Ullam fermentum urna varius et saepe labore dignissim consectetuer fusce elementum.</p>								                     	    		
</div>
</div>
<!-- Accordion section -->	 	    
<div class="accordion-section">		
<h2 class="accordion-title">Main Heading</h2>								
<div class="accordion-content"> 
<p>Con nonummy sem integer interdum volutpat dis eget eligendi aliquip dolorum magnam. Lorem ipsum dolor si amet taciti sunt torquent ipsam proin montes quia netus quo minima sint. At aenean etiam suspendisse ultricies auctor per nihil nisi. Ullam fermentum urna varius et saepe labore dignissim consectetuer fusce elementum.</p>								                     	    		
</div>
</div>		 
</div>
</div>
</div>

Practical example of Accordion:

Main Heading

Con nonummy sem integer interdum volutpat dis eget eligendi aliquip dolorum magnam. Lorem ipsum dolor si amet taciti sunt torquent ipsam proin montes quia netus quo minima sint. At aenean etiam suspendisse ultricies auctor per nihil nisi. Ullam fermentum urna varius et saepe labore dignissim consectetuer fusce elementum.

Main Heading

Practical example of Accordion with nested Accordions (the parent of nested section has class "active-accordion-section"):

<div class="size-960">
	<div class="line">
		<div class="accordion">
			<!-- Accordion section -->    
			<div class="accordion-section">
				<h2 class="accordion-title">Main Heading</h2>
				<div class="accordion-content">
					<p>Con nonummy sem integer interdum volutpat dis eget eligendi aliquip dolorum magnam. Lorem ipsum dolor si amet taciti sunt torquent ipsam proin montes quia netus quo minima sint. At aenean etiam suspendisse ultricies auctor per nihil nisi. Ullam fermentum urna varius et saepe labore dignissim consectetuer fusce elementum.</p>
				</div>
			</div>
			<!-- Accordion section -->
			<div class="accordion-section">
				<h2 class="accordion-title">Main Heading</h2>
				<div class="accordion-content">
					<p>Con nonummy sem integer interdum volutpat dis eget eligendi aliquip dolorum magnam. Lorem ipsum dolor si amet taciti sunt torquent ipsam proin montes quia netus quo minima sint. At aenean etiam suspendisse ultricies auctor per nihil nisi. Ullam fermentum urna varius et saepe labore dignissim consectetuer fusce elementum.</p>
				</div>
			</div>
			<!-- Accordion section -->
			<div class="accordion-section">
				<h2 class="accordion-title">Main Heading</h2>
				<div class="accordion-content">
					<p>Con nonummy sem integer interdum volutpat dis eget eligendi aliquip dolorum magnam. Lorem ipsum dolor si amet taciti sunt torquent ipsam proin montes quia netus quo minima sint. At aenean etiam suspendisse ultricies auctor per nihil nisi. Ullam fermentum urna varius et saepe labore dignissim consectetuer fusce elementum.</p>
				</div>
			</div>
			<!-- Accordion section -->	 	    
			<div class="accordion-section active-accordion-section">
				<h2 class="accordion-title">Main Heading</h2>
				<div class="accordion-content">
					<!-- Nested accordion -->
					<div class="accordion">
						<!-- Nested accordion section -->				                         	
						<div class="accordion-section">
							<h2 class="accordion-title">2nd Sub Heading</h2>
							<div class="accordion-content">
								<p>Con nonummy sem integer interdum volutpat dis eget eligendi aliquip dolorum magnam. Lorem ipsum dolor si amet taciti sunt torquent ipsam proin montes quia netus quo minima sint. At aenean etiam suspendisse ultricies auctor per nihil nisi. Ullam fermentum urna varius et saepe labore dignissim consectetuer fusce elementum.</p>
							</div>
						</div>
						<!-- Nested accordion section -->	
						<div class="accordion-section active-accordion-section">
							<h2 class="accordion-title">2nd Sub Heading</h2>
							<div class="accordion-content">
								<p>Con nonummy sem integer interdum volutpat dis eget eligendi aliquip dolorum magnam. Lorem ipsum dolor si amet taciti sunt torquent ipsam proin montes quia netus quo minima sint. At aenean etiam suspendisse ultricies auctor per nihil nisi. Ullam fermentum urna varius et saepe labore dignissim consectetuer fusce elementum.</p>
							</div>
						</div>
						<!-- Nested accordion section -->	
						<div class="accordion-section">
							<h2 class="accordion-title">2nd Sub Heading</h2>
							<div class="accordion-content">
								<p>Con nonummy sem integer interdum volutpat dis eget eligendi aliquip dolorum magnam. Lorem ipsum dolor si amet taciti sunt torquent ipsam proin montes quia netus quo minima sint. At aenean etiam suspendisse ultricies auctor per nihil nisi. Ullam fermentum urna varius et saepe labore dignissim consectetuer fusce elementum.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>