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..

    CSS: how to put one image and one block with two

    in one line not using float

    CSS - How to set gradient color background for different heights

    How to assign inner shadow to inputs in CSS

    How to use position in CSS?

    How to use scss with css modules / postcss inside components

    How to keep transparent radial background smooth in browsers other than Chrome?

    How to toggle animate with css display:none

    How to arrange subchild in the horizontal menu

    How to make div height 100% inside relative div?

    How to grab the element with certain CSS property value inline

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

    How to Create paragraph first letter uppercase in html & css (in special format)

    how to center and Crop an image to square with CSS

    CSS how to position element fixed just for y-axis?

    how to use the CSS contains-element selector with input elements?

    How to fix header cannot sticky in wordpress?

    CSS: How to shadow a field like this? [closed]

    In Jsoup, how do I parse the CSS query by the attribute, instead of the data?

    How i can create dynaminc ordered list items with pure css

    How to change button colors upon click (Javascript)?

    How do I hide the checkboxes from a radiobox?

    Liferay: how to avoid rebuilding/redeploying CSS files

    How do you find the dimensions of a “display: none” element?

    How to use jQuery to horizontally center an object in the viewport?

    How to make responsive text that isn't too large or too small

    How to apply CSS to dynamically generated PHP database results

    How can I replace the text in an

    from a CSS file without using a tag?

    How to align a flash movie to center with “overflow: hidden”?

    How to increase an width:auto DIV's width by X pixels using pure CSS

    How to color specific word in a container using CSS