Simple Accordion Menü

This is a very easy to expanding accordion menu. It uses the jquery functions "slideUp" and "slideDown".

by scurrilus

HTML

<link rel="stylesheet" href="http://scurrilus.de/scurrilus-jsfiddle/scurrilus-copyright.css">
<script src="http://scurrilus.de/scurrilus-jsfiddle/scurrilus-copyright.js"></script>
<!--powered by SCURRILUS-->
<div id="scurrilusCopy"></div>
<script>scurrilusCopy();</script>
<!--end powered by SCURRILUS-->

<!-- This is a accordion framework. The only thing to add more Elements, is to copy the "li" and "div" and change the Number in given IDs. Each ID must be unique !!!-->
<div class="code">
<section class="mainstage">
<ul>
    <li class="aktive">box 1
      <div class="content">This is content in box 1</div>
    </li>
    <li>box 2
      <div class="content">This is content of box 2 This is content of box 2 This is content of box 2 This is content of box 2 This is content of box 2 This is content of box 2 This is content of box 2 This is content of box 2</div>
    </li>
    <div>This is content of box 2 This is content of box 2 This is content of box 2 This is content of box 2</div>
    <li>box 3
      <div class="content">This is content in box 3</div>
    </li>
    <li>box 4
     <div class="content">This is content in box 3</div>
    </li>
     <li>box 4
     <div class="content">This is content in box 3</div>
    </li>
    </ul>
</section>
</div>

CSS

.mainstage {
    width: 100%;
    border: 1px solid #000000;
    padding: 10px;
    box-shadow: 2px 2px 15px #333;
    border-radius: 5px;
    box-sizing: border-box;
}
ul {
  padding: 0;
  margin: 0;
}

li {
   list-style: none;
   padding: 5px;
   display: block;
   background: #cccccc;
   cursor: pointer;
   border-top: 1px solid #ffffff;
}

.content {
  background: #ccc;
}

.mainstage div {
    display: none;
    border: 1px solid #cccccc;
    padding: 10px;
}

.aktive {
    background: #333333;
    color: #ffffff;
}

JavaScript

//slide Up and Down duration in milliseconds
var slideUp = 300;
var slideDown = 600;

$(".aktive").find('.content').slideDown(slideDown);

//Open new and close current box. 
//For this we use a jquery click function
$('li').click(function(){    

    $(this).addClass('aktive');
    
    //lets run a loop
    if($('li').hasClass('aktive')) {
       $('li').removeClass('aktive');
       $('section div').slideUp(slideUp);
       $(this).addClass('aktive');
       $(this).find('.content').slideDown(slideDown);
    } else {
        $('section div').slideUp(slideUp);
    }   
});