Adding class to javascript selector?

Question

createDocumentStructure('h3, .twistytext'); is the line I am having problems with - last line.

It works if I just have h3 in there but wanted to add a class too. Tried a bunch of different ways to syntax the class in but nothing is working. So I want the expand/collapse to be <div> then <h3 class="twistytext">.

// JavaScript Document
var collapseDivs, collapseLinks;

function createDocumentStructure(tagName) {
    if (document.getElementsByTagName) {
        var elements = document.getElementsByTagName(tagName);
        collapseDivs = new Array(elements.length);
        collapseLinks = new Array(elements.length);
        for (var i = 0; i < elements.length; i++) {
            var element = elements[i];
            var siblingContainer;
            if (document.createElement && (siblingContainer = document.createElement('div')) && siblingContainer.style) {
                var nextSibling = element.nextSibling;
                element.parentNode.insertBefore(siblingContainer, nextSibling);
                var nextElement = elements[i + 1];
                while (nextSibling != nextElement && nextSibling != null) {
                    var toMove = nextSibling;
                    nextSibling = nextSibling.nextSibling;
                    siblingContainer.appendChild(toMove);
                }
                siblingContainer.style.display = 'none';
                collapseDivs[i] = siblingContainer;
                createCollapseLink(element, siblingContainer, i);
            } else {
                // no dynamic creation of elements possible
                return;
            }
        }
        createCollapseExpandAll(elements[0]);
    }
}

function createCollapseLink(element, siblingContainer, index) {
    var div;
    if (document.createElement && (div = document.createElement('div'))) {
        div.appendChild(document.createTextNode(String.fromCharCode(160)));
        var imge = document.createElement('img');
        imge.src = 'https://smartsales.thomsonreuters.com/library/template/cssfiles/gsam/expand.jpg';
        imge.setAttribute('width', '20px');
        imge.setAttribute('height', '20px');
        imge.setAttribute('class', 'imge')
        imge.alt = 'Expand';
        var link = document.createElement('a');
        link.collapseDiv = siblingContainer;
        link.href = '#';
        link.appendChild(imge);
        link.onclick = collapseExpandLink;
        //link.onclick = removediv;
        collapseLinks[index] = link;
        div.appendChild(link);
        element.appendChild(div);
    }
}

function collapseExpandLink(evt) {
    if (this.collapseDiv.style.display == '') {
        this.parentNode.parentNode.nextSibling.style.display = 'none';
        this.firstChild.alt = 'expand';
        this.firstChild.src = 'https://smartsales.thomsonreuters.com/library/template/cssfiles/gsam/expand.jpg';
    } else {
        this.parentNode.parentNode.nextSibling.style.display = '';
        var imgc = document.createElement('img');
        imgc.src = 'https://smartsales.thomsonreuters.com/library/template/cssfiles/gsam/collapse.jpg';
        imgc.setAttribute('width', '20px');
        imgc.setAttribute('height', '20px');
        imgc.setAttribute('class', 'imge')
        imgc.alt = 'Collapse';
        this.firstChild.src = 'https://smartsales.thomsonreuters.com/library/template/cssfiles/gsam/collapse.jpg';
        this.firstChild.alt = 'Collapse';
        // this.firstChild.setAttribute("src","collapse-eikon.jpg");
    }
    if (evt && evt.preventDefault) {
        evt.preventDefault();
    }
    return false;
}

function createCollapseExpandAll(firstElement) {
    var div;
    if (document.createElement && (div = document.createElement('div'))) {
        var link = document.createElement('a');
        link.setAttribute('class', 'expanderall');
        link.href = '#';
        link.appendChild(document.createTextNode('Expand all'));
        link.onclick = expandAll;
        div.appendChild(link);
        div.appendChild(document.createTextNode(' '));
        link = document.createElement('a');
        link.setAttribute('class', 'expanderall');
        link.href = '#';
        link.appendChild(document.createTextNode('Collapse all'));
        link.onclick = collapseAll;
        div.appendChild(link);
        firstElement.parentNode.insertBefore(div, firstElement);
    }
}

function expandAll(evt) {
    for (var i = 0; i < collapseDivs.length; i++) {
        collapseDivs[i].style.display = '';
        collapseLinks[i].firstChild.src = 'https://smartsales.thomsonreuters.com/library/template/cssfiles/gsam/collapse.jpg';
    }
    if (evt && evt.preventDefault) {

        evt.preventDefault();
    }
    return false;
}

function collapseAll(evt) {
    for (var i = 0; i < collapseDivs.length; i++) {
        collapseDivs[i].style.display = 'none';
        collapseLinks[i].firstChild.src = 'https://smartsales.thomsonreuters.com/library/template/cssfiles/gsam/expand.jpg';
    }
    if (evt && evt.preventDefault) {
        evt.preventDefault();
    }
    return false;
}

window.onload = function (evt) {
    createDocumentStructure('h3, .twistytext');
}

@blankip please take the time to format your code correctly. It makes it much easier for others to read and help you with. — Rory McCrossan, Jun 25 '14 at 07:10
Why are you using "getElementsByTagName" when you tag the question as jquery? — Adder, Jun 25 '14 at 07:12
Why you try to pass to `gEBTN()` something else than a tag name? Use `document.querySelectorAll()` instead. — Teemu, Jun 25 '14 at 07:14
As teemu points out the gEB* methods dont take css selectors, TN takes tag name, Id takes id name not id selector, CN takes class name not class selector etc. — Patrick Evans, Jun 25 '14 at 07:19

score 2 · Answer 1 · edited May 23 '17 at 12:29

2

in your function

function createDocumentStructure(tagName) {

change to

function createDocumentStructure(tagName,className) {

and in that function add code

if(className)
{
   elements.className = className;
}

for more detail refer Change an element's class with JavaScript

edited May 23 '17 at 12:29

Community

1
1

answered Jun 25 '14 at 07:13

rjdmello

865
2
9
14

Thank you. Works perfect. And thanks for the link to the syntax. I wouldn't have guessed it pops outside the parentheses. – blankip Jun 25 '14 at 07:21
another thing to be noted: you have to call it correspondingly, instead of using this createDocumentStructure('h3, .twistytext'); you have to call it like createDocumentStructure('h3', 'twistytext'); and don't use . for class – Md. Mahbubul Haque Jun 25 '14 at 07:27
@MahbubulHaque and rjdmello - this is only working in IE7. I was just testing on that and once I tried FF and Chrome it didn't work. – blankip Jun 25 '14 at 08:12
Unable to set property 'className' of undefined or null reference, File: collapse.js, Line: 6, Column: 4 – blankip Jun 25 '14 at 13:48
@ blankip : Because you haven't created the element. you used document.getElementsByTagName(tagName); which just get the element that is existing. you have to create the element first use : element = document.createElement(tagName); then put them in "elements" array of objects to use them and then you can use element.className(className) for the individual elements. Hope this make sense. – Md. Mahbubul Haque Jun 25 '14 at 14:45
@blankip nay specific reason you are using only javascript and not Jquery, if no then use jquery will help you lot – rjdmello Jun 26 '14 at 04:22

Adding class to javascript selector?

1 Answers1