JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="meny">
    <li><p class="title">Title 1</p>
        <ul>
            <li>
                <p id="subtitle1"></p>
            </li>
        </ul>
    </li>
</ul>

JavaScript

function titles() {
    var nextElement = next(this);
    nextElement.style.display = nextElement.style.display === 'none' ? 'block' : 'none';
}

function init() {
    var menu = document.getElementById("meny");
    var p = menu.getElementsByTagName("p");
    var element,i,l;
    
    // Find all ul in #meny and hide them
    var ul = menu.getElementsByTagName("ul");
    for(i = 0,l = ul.length; i<l;i++) {
        ul[i].style.display = 'none';
    }

    // loop all paragraphs text, if it has a class 'title' then add click event
    // else if it has an id of subtitle1 then change its innerHTML
    for(i = 0,l = p.length; i<l;i++) {
        element = p[i];
        if(element.className === 'title') {
            element.onclick = titles;
        } else if(element.id === 'subtitle1') {
            element.innerHTML = 'Detta är min text';
        }
    }
}

function next(elem) {
    do {
        elem = elem.nextSibling;
    } 
    while (elem && elem.nodeType != 1);
    return elem;               
}  

init();