Michael Janea

MJ Accordion Banner (677 downloads)

An easy to use accordion banner made in CSS3.

  • Responsive
  • Easy to implement, you just need to add a couple of classes
  • No jQuery / JavaScript required

 

Demos

  • Title 1

    Caption 1

  • Title 1

    Caption 1

  • Title 1

    Caption 1

  • Title 1

    Caption 1

  • Title 1

    Caption 1

  • Title 1

    Caption 1

 

<ul>
	<li style="background-image:url('https://michaeljanea.me/images/misc/1.jpg')">
		<div class="mj_accordion_outer">
			<div class="mj_accordion_inner">
				<div class="mj_accordion_title">
					<p>Title 1</p>
				</div>

				<div class="mj_accordion_caption">
					<p>Caption 1</p>
				</div>
			</div>
		</div>
	</li>

	<li style="background-image:url('https://michaeljanea.me/images/misc/2.jpg')">
		<div class="mj_accordion_outer">
			<div class="mj_accordion_inner">
				<div class="mj_accordion_title">
					<p>Title 1</p>
				</div>

				<div class="mj_accordion_caption">
					<p>Caption 1</p>
				</div>
			</div>
		</div>
	</li>

	<li style="background-image:url('https://michaeljanea.me/images/misc/3.jpg')">
		<div class="mj_accordion_outer">
			<div class="mj_accordion_inner">
				<div class="mj_accordion_title">
					<p>Title 1</p>
				</div>

				<div class="mj_accordion_caption">
					<p>Caption 1</p>
				</div>
			</div>
		</div>
	</li>

	<li style="background-image:url('https://michaeljanea.me/images/misc/4.jpg')">
		<div class="mj_accordion_outer">
			<div class="mj_accordion_inner">
				<div class="mj_accordion_title">
					<p>Title 1</p>
				</div>

				<div class="mj_accordion_caption">
					<p>Caption 1</p>
				</div>
			</div>
		</div>
	</li>

	<li style="background-image:url('https://michaeljanea.me/images/misc/5.jpg')">
		<div class="mj_accordion_outer">
			<div class="mj_accordion_inner">
				<div class="mj_accordion_title">
					<p>Title 1</p>
				</div>

				<div class="mj_accordion_caption">
					<p>Caption 1</p>
				</div>
			</div>
		</div>
	</li>

	<li style="background-image:url('https://michaeljanea.me/images/misc/6.jpg')">
		<div class="mj_accordion_outer">
			<div class="mj_accordion_inner">
				<div class="mj_accordion_title">
					<p>Title 1</p>
				</div>

				<div class="mj_accordion_caption">
					<p>Caption 1</p>
				</div>
			</div>
		</div>
	</li>
</ul>

 

Directions

  1. Extract the downloaded zip file (mjAccordionBanner.zip)
  2. Insert below codes to the <head> section of your page
    <link rel="stylesheet" type="text/css" href="mjAccordionBanner.css" />
  3. Add ribbons according to your preferences. Use the demos as your reference.

 

Logs

 

Download MJ Accordion Banner

CONTACT ME

Your opinion is important to me. Take part on my goal to continuously improve my work by giving your suggestions and comments. You may also send your concerns or inquiries here.