Простой аккордеон на jQuery


html

<div class="accordion">
  <div class="accordion-item">
    Item 1
    <div class="type"></div>
  </div>
  <div class="data">
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  </div>
   <div class="accordion-item">
    Item 2
     <div class="type"></div>
  </div>
  <div class="data">
    when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </div>
  <div class="accordion-item">
    Item 3
    <div class="type"></div>
  </div>
  <div class="data">
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  </div>
</div>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

css

body
{
font-family: Arial, Helvetica, sans-serif;
}
.accordion
{
  width:100%;
  min-height:300px;
  margin:20px auto;
}
.accordion-item {
font-size: 1em;
margin: 0 10px 0 10px;
padding: 10px;
height: 20px;
background: #f2f2f2;
border-bottom:1px solid #ccc;
color: #000;
cursor:pointer;
}

.accordion-item.open
{
background:#14ad40;
border-bottom:0px;
color:#fff;
}
.accordion-item.open .type {
float: right;
background: url('http://vivekarora.com/images/minus.png') center no-repeat;
padding: 10px;
}

.accordion-item .type {
float: right;
background: url('http://vivekarora.com/images/plus.png') center no-repeat;
padding: 10px;
}

div.data {
background: #fff;
margin: 0 10px 0 10px;
padding: 10px;
border:1px solid #ccc;
font-size: .8em;
line-height: 140%;
display:none;
}

jquery

$(function($) {
  var allAccordions = $('.accordion div.data');
  var allAccordionItems = $('.accordion .accordion-item');
  $('.accordion > .accordion-item').click(function() {
    if($(this).hasClass('open'))
    {
      $(this).removeClass('open');
      $(this).next().slideUp("slow");
    }
    else
    {
    allAccordions.slideUp("slow");
    allAccordionItems.removeClass('open');
    $(this).addClass('open');
    $(this).next().slideDown("slow");
    return false;
    }
  });
});

DEMO

Very Easy Accordion With jQuery From Scratch

This is an accordion I wrote for a site a while back. I turn to this code every time I need a quick and easy accordion for a site.


Step 1

Here is what the html markup will look like, a header div then a div right after that will hold all of the content of the slide accordion.

    <div class="accordion">
    <div class="accord-header">Header 1</div>
    <div class="accord-content">This is the content for the first header.</div>
    <div class="accord-header">Header 2</div>
    <div class="accord-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>

Step 2

Then to make it all work, we need to add this easy jQuery script.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $(".accordion .accord-header").click(function() {
    if($(this).next("div").is(":visible")){
    $(this).next("div").slideUp("slow");
    } else {
    $(".accordion .accord-content").slideUp("slow");
    $(this).next("div").slideToggle("slow");
    }
    });
    });
    </script>

Step 3

The only CSS that is required for this to work properly is the following:

    .accord-content { display: none; }

This just hides the content right off the bat, as soon as the page loads, then once the header div is clicked, you will see the content slide down.

DEMO