[JS] css target toggle JS

http://forum.valorsolo.com/viewtopic.php?f=21&t=228

by PAEz

HTML

<div class="topicrow">
    <div class="toggleMe hidden"> 
        <a onclick="toggleClass('.toggleMe','hidden');" id="">Hide JS</a>
    </div>
    <div class="toggleMe">            
        <a onclick="toggleClass('.toggleMe','hidden')">Show JS<img src="" alt="add comment" /></a>
    </div>
    <div id="comment1" class="toggleMe hidden bleh">
        <script src="http://pastebin.com/embed_js.php?i=ELrriKfP"></script>
    </div>
</div><br /><br />

CSS

.hidden{
    max-height:0px !important;
    overflow: hidden !important;
    opacity:0 !important;
}

.toggleMe {
    -webkit-transition:opacity 600ms linear;
    -moz-transition:opacity 600ms linear;
}

JavaScript

// http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript
/*
function _hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function _addClass(ele, cls) {
    if (!this._hasClass(ele, cls)) ele.className += " " + cls;
}

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

// http://blog.stevenlevithan.com/archives/faster-trim-javascript    
function trim (str) {
    str = str.replace(/^\s+/, '');
    for (var i = str.length - 1; i >= 0; i--) {
        if (/\S/.test(str.charAt(i))) {
            str = str.substring(0, i + 1);
            break;
        }
    }
    return str;
}

*/

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;
    }
}

toggleClass = function(ele, cls) {
    //querySelector works in FF 3.5+, IE 8+, Chrome 4+, Opera 10+
    var elements = document.querySelectorAll(ele);
    if ((elements == null) || (elements.length == 0)) {
        return;
    }
    for (var i = 0; i < elements.length; i++) {
        _toggleClass(elements[i], cls);
    }
}