[KO] Simple toggle

by PAEz

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<div>
    <a href="" data-bind='visible:!commentsVisible(), click:showComments'>[show]</a>
    <a href="" data-bind='visible:commentsVisible, click:hideComments'>[hide]</a>
    <div  id="drop" class="list" style="" data-bind='visibility:commentsVisible()'>
        <form action="http://valorsolo.com/demo/post.php" method="POST" data-bind="submit: submitForm">
            subject:<br />
            <input type="text" name="subject" size="50" data-bind='value:subject, valueUpdate: "afterkeydown"'/><br />
            your comment:<br />
            <textarea name="yourpost" rows="2" cols="60" data-bind='value:comment, valueUpdate: "afterkeydown"'></textarea><br />
            <input type="submit" name="submit" value="Post Topic" class="btn" onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'" data-bind='enable:isFormValid '/>
            <br /><br />
        </form>
    </div>
</div>
<div><br /><br />
    <iframe src="" style="border:1px solid #000;width:600px;height:400px;white-space:normal;"></iframe>
</div>

CSS

.hidden {opacity:0;
    height: 0px;
    -webkit-transition: opacity 1s linear !important;}
.shown {opacity:1;
    height: auto;
    -webkit-transition: opacity 1s linear !important;}

JavaScript

var viewModel = {
    subject: ko.observable(""),
    comment: ko.observable(""),
    commentsVisible: ko.observable(false)
};

viewModel.showComments = function() {
    this.commentsVisible(true)
}

viewModel.hideComments = function() {
    this.commentsVisible(false)
}

viewModel.submitForm = function() {
    // do any last checks, notifications here
    if (this.isFormValid()) {
        return true;
    }
    else {
        return false;
    }
}

// make sure subject and comment have content and are not just whitespace characters
viewModel.isFormValid = ko.dependentObservable(function() {
    var reg = /.*\S.*/
    if ((reg.test(this.subject())) && (reg.test(this.comment()))) {
        return true;
    }
    else {
        return false;
    }
}, viewModel);

ko.bindingHandlers.visibility = {

    init: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
      
        if (!value) {
            addClass(element, "hidden");
            //  element.style.display='none';  
        } else {
            addClass(element, "shown");
            //  element.style.display='block';  
        }
    },

    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value) {
            //    $(element).fadeOut();
           // element.style.display = 'block';
            
                switchClass(element, "hidden", "shown");
        }
        else
        {
            switchClass(element,"shown","hidden");
            
        }
    } 
};

ko.applyBindings(viewModel);

function toggleClass(ele, cls) {
    if (ele.className.match(new RegExp(' (\\s | ^ )' + cls + ' (\\s | $)'))) {
    var reg = new RegExp(' ( ^ | \\s + )' + cls + ' ($ | \\s + )');
        ele.className =ele.className.replace(reg, '');
    } else {
        ele.className += " " + cls;
    }
}

function switchClass(ele, cls, dest) {
    if (ele.className.match(new RegExp(' (\\s | ^ )' + cls + ' (\\s |...