JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<title>Vacancies</title>

</head>
<body>
<div id="options">
    <a href="javascript:parentAccordion.pr(1)">Exand All</a> | <a href="javascript:parentAccordion.pr(-1)">Collapse All</a>
</div>
<ul class="acc" id="acc">
    <li>
        <h3>TyNewydd</h3>
        <div class="acc-section">
            <div class="acc-content">
                <ul class="acc" id="nested">
                    <li>
                        <h3>Nested One</h3>
                        <div class="acc-section">
                            <div class="acc-content">
                                Donec elementum lobortis lorem. Sed aliquet lacus vitae nibh. Sed ullamcorper pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            </div>
                        </div>
                    </li>
                    <li>
                        <h3>Nested Two</h3>
                        <div class="acc-section">
                            <div class="acc-content">
                                Vestibulum blandit mauris elementum mauris.
                            </div>
                        </div>
                    </li>
                    <li>
                        <h3>Nested Three</h3>
                        <div class="acc-section">
                            <div class="acc-content">
                                Morbi felis libero, porta non, sagittis ac, consectetur in, sem.
                            </div>
                        </div>
                    </li>
                </ul>
                
            </div>
        </div>
    </li><li>
        <h3>Woodside</h3>
        <div class="acc-section">
            <div class="acc-content">
                To initialize an accordion use the following code:<br /><br />
                <code>
                    var accordion=new TINY.accordion.slider(&quot;accordion&quot;);<br />
                   ...

CSS

* {margin:0; padding:0; font:12px Verdana,Arial}
code {font-family:"Courier New",Courier}

#options {
width:457px;
margin:20px auto;
text-align:right;
color:#9ac1c9}
 
#options a 
{text-decoration:none;
 color:#9ac1c9
 }
 
 
#options a:hover{
color:#033
}

#acc {
width:457px; 
list-style:none;
 color:#033; 
 margin:0 auto 40px
 }
 
#acc h3 {
width:443px;
 border:1px solid #9ac1c9;
 padding:6px 6px 8px; 
 font-weight:bold;
 margin-top:5px; 
 cursor:pointer;
 background:url(images/header.gif)
 }
#acc h3:hover {
background:url(images/header_over.gif)
}

#acc .acc-section {
overflow:hidden;
 background:#fff
 
}

#acc .acc-content {
width:425px;
 padding:15px;
 border:1px solid #9ac1c9; 
 border-top:none; 
 background:#fff
 }

#nested {
width:425px;
 list-style:none;
 color:#033; 
 margin-bottom:15px
 }
 
#nested h3 {
width:411px; 
border:1px solid #9ac1c9;
 padding:6px 6px 8px; 
 font-weight:bold; 
 margin-top:5px; 
 cursor:pointer; 
 background:url(images/header.gif)
 }
 
#nested h3:hover {
background:url(images/header_over.gif)
}

#nested .acc-section {
overflow:hidden;
 background:#fff
 }
 
#nested .acc-content {
width:393px;
 padding:15px;
 border:1px solid #9ac1c9;
 border-top:none;
 background:#fff
 }
#nested .acc-selected {
background:url(images/header_over.gif)
}

JavaScript

var TINY={};

function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}

TINY.accordion=function(){
    function slider(n){this.n=n; this.a=[]}
    slider.prototype.init=function(t,e,m,o,k){
        var a=T$(t), i=s=0, n=a.childNodes, l=n.length; this.s=k||0; this.m=m||0;
        for(i;i<l;i++){
            var v=n[i];
            if(v.nodeType!=3){
                this.a[s]={}; this.a[s].h=h=T$$(e,v)[0]; this.a[s].c=c=T$$('div',v)[0]; h.onclick=new Function(this.n+'.pr(0,'+s+')');
                if(o==s){h.className=this.s; c.style.height='auto'; c.d=1}else{c.style.height=0; c.d=-1} s++
            }
        }
        this.l=s
    };
    slider.prototype.pr=function(f,d){
        for(var i=0;i<this.l;i++){
            var h=this.a[i].h, c=this.a[i].c, k=c.style.height; k=k=='auto'?1:parseInt(k); clearInterval(c.t);
            if((k!=1&&c.d==-1)&&(f==1||i==d)){
                c.style.height=''; c.m=c.offsetHeight; c.style.height=k+'px'; c.d=1; h.className=this.s; su(c,1)
            }else if(k>0&&(f==-1||this.m||i==d)){
                c.d=-1; h.className=''; su(c,-1)
            }
        }
    };
    function su(c){c.t=setInterval(function(){sl(c)},20)};
    function sl(c){
        var h=c.offsetHeight, d=c.d==1?c.m-h:h; c.style.height=h+(Math.ceil(d/5)*c.d)+'px';
        c.style.opacity=h/c.m; c.style.filter='alpha(opacity='+h*100/c.m+')';
        if((c.d==1&&h>=c.m)||(c.d!=1&&h==1)){if(c.d==1){c.style.height='auto'} clearInterval(c.t)}
    };
    return{slider:slider}
}();