Show/Hide Items and Columns (jQuery)

HTML

<div class="mso">
     <h1 class="title">Column 1</h1>

    <p class="item">Item 1</p>
    <p class="item">Item 2</p>
    <p class="item">Item 3</p>
    <p class="item">Item 4</p>
    <div class="controls">
        <input id="show-items-1" class="show-items" type="checkbox" checked="checked" />
        <label for="show-items-1">Show items</label>

    </div>
</div>

CSS

html {
    font:14px sans-serif;
}
h1 {
    font-size:1.5em;
}
input, label {
    cursor:pointer;
}
label {
    font-size:0.8em;
}
.column {
    float:left;
    margin-right:3em;
}
p:not(.item) {
    margin:3px 0;
}
.column * {
    opacity:1;
    -webkit-transition:opacity 0.5s ease-in-out;
    -moz-transition:opacity 0.5s ease-in-out;
    -ms-transition:opacity 0.5s ease-in-out;
    -o-transition:opacity 0.5s ease-in-out;
    transition:opacity 0.5s ease-in-out;
}
.hidden {
    opacity: 0;
}
}

JavaScript

//jQuery(function ($) {
//    $("input", this).on("change", function () {

$( "input[type='checkbox']" ).change(function() {
        var state = $(this).is(":checked"),
            showColumn = $(this).attr("class") == "mso" 
        if (state) {
            if (showColumn) {}
            alert('showing this');
            alert('show doing something else like ' + 5 );
        		} else {
            
            	if (showColumn) {}
            	alert('not showing this');
              alert('not showing something else like ' + 6);
        			}
    });
//});