Prosty accordion

Przedstawiam prościutki accordion. Każda część naszego accordiona to box o klasie "box_all", który zawiera boxy o klasach "box_1" oraz "box_2". Po kliknięciu na diva o klasie "box_1" rozsuwamy diva o klasie "box_2" w obrębie diva o klasie "box_all".

 

HTML:

<div class="box_all">
    <div class="box_1">tab 1</div>
    <div class="box_2"></div>
</div>		
<div class="box_all">
    <div class="box_1">tab 2</div>
    <div class="box_2"></div>
</div>	
<div class="box_all">
    <div class="box_1">tab 3</div>
    <div class="box_2"></div>
</div>	

CSS:

.box_1{
    background:red;
    width:190px;
    height:30px;
    display:block;
    clear:both;
    line-height:30px;
    color:#fff;
    font-family:Arial, sans-serif;
    cursor:pointer;
    padding:0 5px;
}
.box_2{
    background:blue;
    width:200px;
    height:60px;
    display:block;
    clear:both;
}

JS:

<script type="text/javascript"> if (window.jQuery == undefined) document.write( unescape('%3Cscript src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"%3E%3C/script%3E') );</script>   
<script>
jQuery.noConflict();
jQuery(document).ready(
    function()
    {   
        var allPanels = jQuery('.box_all .box_2').hide();
        jQuery('.box_all .box_2').first().show(); // otwarty pierwszy tab na początku
        jQuery('.box_all .box_1').click(function() {
            allPanels.slideUp();
            jQuery(this).next().slideDown();
            jQuery(".box_all .box_1").removeClass( "active_tab" ); 
            jQuery(".box_all:hover .box_1").addClass( "active_tab" ); 
            return false;
    });
</script>

DEMO