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

ПОЛЕЗНО Bootstrap input file styling

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.

ПОЛЕЗНО Javascript печать в popup окне

DEMO