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


Tags: javascript,html,css,stylesheet

Problem :

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?



Solution :

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/


    CSS Howto..

    How do I adjust the height of the pikaChoose plugin without ruining the width?

    How to change css on multiple elements

    How to place something in a triangle-shaped box?

    How to align div to the bottom of another div in HTML?

    How to create correct .css for Html.TextBoxFor

    How to Programatically Toggle a Zurb Foundation Switch Control, in Chrome?

    How to Extract one images from bunch of image(Image Pack)?

    How to edit the CSS of a td element through the hierarchy?

    How to align radio buttons inside a DIV?

    How to remove the circle in the background of the impress.js demo

    How to change the color of table rows once ng-repeat executed

    How to make a ghost element in CSS?

    how to make image in over than other like this

    How to change CSS according to user Operating System

    How to center vertical inside header?

    How to move a CSS class below another? [closed]

    How to lock scroll for all page?

    how to css absolute positioning right way

    How to create a dropdown menu like google's 'More' button?

    How to make child divs visible in tympanus.net's CSS Radio Checked Tab Method

    How to properly fix CSS inconsistencies across desktop and mobile browsers?

    How to prevent HTML element moving when resizing window?

    How to toggle ng-class

    How to group CSS/Javascript button behaviour? [closed]

    How to vertically center dynamically 1 or 2 lines of text with CSS? [duplicate]

    How to make jQuery show() stay on page

    CSS how to translate an image up, and have the div adjust to the new size?

    How to make this inner div vertically centered? (Using CSS)

    How to slide these divs continuously in loop

    how to float the section tags in html5