JSFiddle - React, Tailwind, and code Playground

by Johan Vandeplas

HTML

<div id="accordions">
    <div class="AccordionContainer">
        <div class="runAccordionButton">
            <div class="Accordiontitle" onselectstart="return false;">this is the accordeon title<a>
          <input class="AccordionLink" type="button" href="ItemPages.html" id="docname"/>
        </a>
    
                <br/> <a id="POnumber"></a>
    
            </div>
        </div>
        <div id="Accordion1Content" class="AccordionContent" style="background-color:white; color:grey;">
            <form>
                <p>
                    <label for="create">Created by :</label>
                    <input type="text" style="margin-left:60px;" readonly="readonly"
                    DISABLED="DISABLED" size="22" class="create" />
                </p>
                <p>
                    <label for="createdate">Created Date :</label>
                    <input type="text" style="margin-left:43px;" readonly="readonly"
                    DISABLED="DISABLED" size="22" class="createdate" />
                </p>
                <p>
                    <label for="process">Process name :</label>
                    <input type="text" style="margin-left:36px;" readonly="readonly"
                    DISABLED="DISABLED" size="22" class="process" />
                </p>
                <p>
                    <label for="transtype">Transaction type :</label>
                    <input type="text" style="margin-left:20px;"
                    readonly="readonly" DISABLED="DISABLED" size="22" class="transtype" />
                </p>
                <p>
                    <label for="lastact">Last action :</label>
                    <input type="text" style="margin-left:61px;" readonly="readonly"
                    DISABLED="DISABLED" size="22" class="lastact" />
                </p>
                <p>
                    <label for="lastuser">Last user :</label>
                    <input type="text" style="margin-left:73px;" readonly="readonly"
         ...

CSS

.hidden {
    display:none;
}

JavaScript

/* a helper method */

function getElsByClassName(classname, container){
    var rv = [];
    container = container || document;
    
    var elems  = container.getElementsByTagName('*')
    if (elems.length){
        for (var x in elems ){
            if (elems[x] && elems[x].className && elems[x].className == classname){
                rv.push(elems[x]);
            }
        }
    }
    return rv; 
}
function addClass(element, cls){
    var css = element.className.split(' ');
    if(css.indexOf(cls) === -1){
        css.push(cls);
        element.className=css.join(' ');
    }
    return element;
}
function removeClass(element, cls){
    var css = element.className.split(' ');
    while((n = css.indexOf(cls)) !== -1) delete css[n];
    element.className=css.join(' ');
    return element;
}
    
/* the code */
var accordions = document.getElementById("accordions"),
    accordion = getElsByClassName("AccordionContainer")[0],
    acc_btn = getElsByClassName("runAccordionButton", accordion )[0],
    numberOfAcc = 10;

var toggleAcc = function(event){
    //clicked accordeon
    var accContent =  getElsByClassName("AccordionContent",this.parentElement)[0],
        allAccContents = getElsByClassName("AccordionContent",accordions);
    
    console.log(accContent );
    
    for(var i=0; i< allAccContents.length; i++){
        addClass(allAccContents[i], 'hidden');
    }
    removeClass(accContent , 'hidden');
    
    return false;
    
}
 
acc_btn .onclick = toggleAcc;
    
for(var i = 0; i< numberOfAcc; i++){
    var obj = accordion.cloneNode(true),
        btn = getElsByClassName("runAccordionButton", obj)[0];
   
    btn.onclick = toggleAcc;

    //setting values
    var creator = getElsByClassName('create',obj)[0]
    creator.value = 'John Do the ' + i + 'th';  
   
    
    //add it to the container       
    accordions.appendChild(obj);
}