Michael Janea

MJ ACCORDION (792 downloads)

Displays collapsible content panels for presenting information in a limited amount of space.

 

Demo

Default Functionality
  • Accordion Item #1
    Content 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, suscipit autem sequi perferendis asperiores quidem id sunt officiis molestias nobis. Sint, veritatis, quis voluptates totam sed quod quidem placeat iusto.
  • Accordion Item #2
    Content 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, nesciunt, accusantium, ad nam officia illum officiis accusamus veniam similique eligendi laborum saepe sed beatae dolores totam suscipit quis corporis qui.
  • Accordion Item #3
    Content 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, rem, aspernatur iure enim consequatur delectus et nam ratione laboriosam commodi id doloribus dicta odio a nemo numquam consectetur eligendi officia.
<ul class="mj_accordion" id="myAccordion">
			        <li>
			            <div class="mj_accordion_item active">Accordion Item #1</div>
			            <div class="mj_accordion_content active">Content 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, suscipit autem sequi perferendis asperiores quidem id sunt officiis molestias nobis. Sint, veritatis, quis voluptates totam sed quod quidem placeat iusto.</div>
			        </li>
			        
			        <li>
			            <div class="mj_accordion_item">Accordion Item #2</div>
			            <div class="mj_accordion_content">Content 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, nesciunt, accusantium, ad nam officia illum officiis accusamus veniam similique eligendi laborum saepe sed beatae dolores totam suscipit quis corporis qui.</div>
			        </li>
			        
			        <li>
			            <div class="mj_accordion_item">Accordion Item #3</div>
			            <div class="mj_accordion_content">Content 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, rem, aspernatur iure enim consequatur delectus et nam ratione laboriosam commodi id doloribus dicta odio a nemo numquam consectetur eligendi officia.</div>
			        </li>
			    </ul>
<script type="text/javascript">
			    $(function(){
			        $('#myAccordion').mjAccordion();
			    });
			    </script>
.mj_accordion {padding:0; margin:0 0 .5em;}
			    .mj_accordion > li {list-style:none;}
			    .mj_accordion > li:first-child .mj_accordion_item {margin-top:0;}
			    .mj_accordion .mj_accordion_item {cursor:pointer; color:#333; background:#f5f5f5; border:1px solid #ddd; padding:10px 15px; -webkit-border-radius:3px; border-radius:3px; font-size:16px; margin-top:.3em;}
			    .mj_accordion .mj_accordion_item:hover {background:#eee;}
			    .mj_accordion .mj_accordion_item.active {border-bottom:none; -webkit-border-radius:3px 3px 0 0; border-radius:3px 3px 0 0;}
			    .mj_accordion .mj_accordion_content {padding:15px; border:1px solid #ddd; display:none; -webkit-border-radius:0 0 3px 3px; border-radius:0 0 3px 3px; background:#fff;}
			    .mj_accordion .mj_accordion_content.active {display:block; height:inherit;}
Enable Toggle Option
  • Accordion Item #1
    Content 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, suscipit autem sequi perferendis asperiores quidem id sunt officiis molestias nobis. Sint, veritatis, quis voluptates totam sed quod quidem placeat iusto.
  • Accordion Item #2
    Content 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, nesciunt, accusantium, ad nam officia illum officiis accusamus veniam similique eligendi laborum saepe sed beatae dolores totam suscipit quis corporis qui.
  • Accordion Item #3
    Content 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, rem, aspernatur iure enim consequatur delectus et nam ratione laboriosam commodi id doloribus dicta odio a nemo numquam consectetur eligendi officia.
<ul class="mj_accordion" id="myAccordionWithToggle">
			        <li>
			            <div class="mj_accordion_item active">Accordion Item #1</div>
			            <div class="mj_accordion_content active">Content 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, suscipit autem sequi perferendis asperiores quidem id sunt officiis molestias nobis. Sint, veritatis, quis voluptates totam sed quod quidem placeat iusto.</div>
			        </li>
			        
			        <li>
			            <div class="mj_accordion_item">Accordion Item #2</div>
			            <div class="mj_accordion_content">Content 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, nesciunt, accusantium, ad nam officia illum officiis accusamus veniam similique eligendi laborum saepe sed beatae dolores totam suscipit quis corporis qui.</div>
			        </li>
			        
			        <li>
			            <div class="mj_accordion_item">Accordion Item #3</div>
			            <div class="mj_accordion_content">Content 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, rem, aspernatur iure enim consequatur delectus et nam ratione laboriosam commodi id doloribus dicta odio a nemo numquam consectetur eligendi officia.</div>
			        </li>
			    </ul>
<script type="text/javascript">
			    $(function(){
			        $('#myAccordionWithToggle').mjAccordion({toggle:true});
			    });
			    </script>
.mj_accordion {padding:0; margin:0 0 .5em;}
			    .mj_accordion > li {list-style:none;}
			    .mj_accordion > li:first-child .mj_accordion_item {margin-top:0;}
			    .mj_accordion .mj_accordion_item {cursor:pointer; color:#333; background:#f5f5f5; border:1px solid #ddd; padding:10px 15px; -webkit-border-radius:3px; border-radius:3px; font-size:16px; margin-top:.3em;}
			    .mj_accordion .mj_accordion_item:hover {background:#eee;}
			    .mj_accordion .mj_accordion_item.active {border-bottom:none; -webkit-border-radius:3px 3px 0 0; border-radius:3px 3px 0 0;}
			    .mj_accordion .mj_accordion_content {padding:15px; border:1px solid #ddd; display:none; -webkit-border-radius:0 0 3px 3px; border-radius:0 0 3px 3px; background:#fff;}
			    .mj_accordion .mj_accordion_content.active {display:block; height:inherit;}

 

More Set-up Information

Option Description
duration

a string or number determining how long the animation will run.

Default Value: 400
toggle

Toggles the collapsible element on invocation

Default Value: false
Choices: true, false

 

Directions

  1. Extract the downloaded zip file (mjAccordion.zip)
  2. Insert below codes to the <head> section of your page
    <link rel="stylesheet" type="text/css" href="mjAccordion.css" />
  3. Insert below codes before the </body> tag of your page
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="mjAccordion.js"></script>
    <script type="text/javascript">
    $('.mj_accordion').mjAccordion();
    </script>
  4. Add the below sample HTML to the BODY of your page
    <ul class="mj_accordion">
        <li>
            <div class="mj_accordion_item active">Accordion Item #1</div>
            <div class="mj_accordion_content active">Content 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, suscipit autem sequi perferendis asperiores quidem id sunt officiis molestias nobis. Sint, veritatis, quis voluptates totam sed quod quidem placeat iusto.</div>
        </li>
        
        <li>
            <div class="mj_accordion_item">Accordion Item #2</div>
            <div class="mj_accordion_content">Content 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, nesciunt, accusantium, ad nam officia illum officiis accusamus veniam similique eligendi laborum saepe sed beatae dolores totam suscipit quis corporis qui.</div>
        </li>
        
        <li>
            <div class="mj_accordion_item">Accordion Item #3</div>
            <div class="mj_accordion_content">Content 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, rem, aspernatur iure enim consequatur delectus et nam ratione laboriosam commodi id doloribus dicta odio a nemo numquam consectetur eligendi officia.</div>
        </li>
    </ul>

 

Logs

 

Download MJ Accordion

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.