jquery stop propagation event example

by nirus

HTML

<div class="accordionButton">TEST 1</div>

<div class="accordionContent">
    content 1
</div>

<div class="accordionButton">
    <div class="actions">
        <label>test <input type="checkbox" /></label>
    </div>
</div>

<div class="accordionContent">
    content 3
</div>

CSS

.accordionButton {    
    width:100%;
    background: #efead9;
    border-bottom: 1px solid #FFFFFF;
    cursor: pointer;
    }
    
.accordionBar {    
    width:100%;
    background: #efead9;
    border-bottom: 1px solid #FFFFFF;
    cursor: pointer;
    }
    
.accordionButton span 
{
    padding:10px; 
    display:block;
}
    
.accordionContent {    
    width:100%;
    background: #fff;
    border:1px solid #ccc;
    position:relative;
    zoom:1;
    }
    

.on {
    background: #999;
    }
    
.over {
    background: #CCCCCC;
    }

JavaScript

// ACCORDION 
$('input:checkbox').click(function(e){
  e.stopPropagation();  
});
    $('.accordionButton').click(function () {
        
        $('.accordionButton').removeClass('on');
        $('.accordionContent').slideUp('normal');
        if ($(this).next().is(':hidden') == true) {
            $(this).addClass('on');
            $(this).next().slideDown('normal');
        }

        $('.accordionButton .rowactionbuttons').noop();
    });

    $('.accordionButton').mouseover(function () {
        $(this).addClass('over');
    }).mouseout(function () {
        $(this).removeClass('over');
    });

    $('.accordionContent').hide();