Control Show/Hide multiple DIV using CSS, Javascript, and Anchor without unique ID

Question

I have an older JavaScript/CSS file that used to (no longer works in current browsers) toggle the display properties for multiple divs by way of anchor tags. The CSS document.stylesheets would toggle based on value "rules", that required the style to be in a specific sequence to control the "none" to "block" toggling (or the reverse). Here is a link to the JSFiddle example: JSFiddle

Here is the JavaScript:

function NorB(arg){
if (arg=="n") {
    document.styleSheets[0].rules[0].style.display=='block';
    document.styleSheets[0].rules[1].style.display=='none';
} else {
    document.styleSheets[0].rules[0].style.display=='none';
    document.styleSheets[0].rules[1].style.display=='block';
}

}

Here is the HTML:

    <table>
    <tr>
    <td>
    <div class="narrative" id="rpmAct1">
        <div class="buttons">
            <div class="narButton"><a href="javascript: onClick=NorB('n')">Narrative ></a></div>
            <div class="bulButton"><a href="javascript: onClick=NorB('b')">List View ></a></div>
        </div>

        <div class="narrativeContent">
            <div class="n">Narrative text</div>
            <div class="b">
                <ul>
                    <li>List Item A</li>
                    <li>List Item B</li>
                    <li>List ITem C</li>
                </ul>
            </div>
        </div>  
    </div>
    </td>                   
    </tr>

    <tr>
    <td>
    <div class="narrative" id="rpmAct2">
        <div class="buttons">
            <div class="narButton"><a href="javascript: onClick=NorB('n')">Narrative 2></a></div>
            <div class="bulButton"><a href="javascript: onClick=NorB('b')">List View 2></a></div>
        </div>

        <div class="narrativeContent">
            <div class="n">Narrative 2 text</div>
            <div class="b">
                <ul>
                    <li>List 2 Item A</li>
                    <li>List 2 Item B</li>
                    <li>List 2 ITem C</li>
                </ul>
            </div>
        </div>  
    </div>
    </td>                   
    </tr>

</table>

And lastly, the CSS:

        .n {
        display:block;
    }
    .b {
        display:none;
    }
    .b ul {
        margin-left:3px;
        margin-top:0px;
        margin-right:10px;
        margin-bottom:-2px;
    }
    .b ul li {
        list-style-type:square;
        list-style-position:outside;
        line-height:12px;
    }
    .buttons {
        position:relative;
        width:300px;
    }
    .narButton {
        width:80px;
        float:left;
        padding:2px 0px 2px 5px;    
    }
    .bulButton {
        width:80px;
        float:left;
        padding:2px 0px 2px 5px;
    }
    .bulButton a, .narButton a {
        font-size:14px;
        font-style:normal;
        text-decoration:none;
    }
    .narrativeContent {
        border-top:1px solid #CCC;
        border-bottom:1px solid #CCC;
        padding:5px;
    }

Since there is a large number of div/anchor elements on the page, the goal is to avoid creating unique IDs for each, and continue to use basic CSS/JavaScript (avoid using jQuery and the like). Thoughts on how to keep this simple?

Answer 1

Append these CSS

.b-mode .b, .n-mode.n {
    display:block;
}
.b-mode .n, .n-mode.b {
    display:none;
}

Modify onclick action

<a href="#" onclick="NorB(this,'n')">

Modify Javascript

function NorB(e, arg) {
    var wrapper = e.parents('.narrative');
    var rm = arg == 'n' ? 'b' : 'n';
    wrapper.classList.add(arg + '-mode');
    wrapper.classList.remove(rm + '-mode');
}
Object.prototype.parents = function (selector) {
    if (selector.length == 0) return;
    var prefix = selector.substr(0, 1);
    if (prefix != '#' && prefix != '.') return;
    var selector = selector.substr(1);
    var p = this.parentNode;
    while (p !== null) {
        switch (prefix) {
            case "#":
                if (p.getAttribute('id') == selector) return p;
                break;
            case ".":
                if (p.classList.contains(selector)) return p;
                break;
        }
        p = p.parentNode;
    }
    return null;
};

http://jsfiddle.net/ypnospae/