How to apply JS to an (openned) accordion, when it is closed on DOM load

Question

on https://www.apis.de/dienstleistungen/trainings/ I have several accordions. Within these are tables with dates and other info. each has an ID generated serverside (php). I want to simply grab the tbody tag using the selector path (dev tools) --> get the children nodes and switch e.g. node[11] and node[12] around. The problem is that the JS function i wrote does not get recognized because the accordion is closed on page load and doesn't recognize the selector path (using an IIFE)

(function(){
let first_table = document.querySelector("#site-wrapper > div > div > main > article > section > ul > li.is-expanded > ul > li > table > tbody"); // gets the tbody of first accordion (Schulungen Deutschland)
console.log(first_table); // returns null, because the accordion was not open when the function is executed. 

})();

Kobe · Accepted Answer · 2019-05-13T13:59:06.260

1

EDIT: What I wrote before was incorrect.

Rather than using a query selector, You can access the first tbody using document.getElementsByTagName('tbody')[0]

If you are able to access the ID's of the elements that you want to swap on the client side, then you can swap them using the code that jfriend00 wrote:

function doSwap() {
    swapElements(document.getElementById("one"), document.getElementById("two"));
}

function swapElements(obj1, obj2) {
    // create marker element and insert it where obj1 is
    var temp = document.createElement("div");
    obj1.parentNode.insertBefore(temp, obj1);

    // move obj1 to right before obj2
    obj2.parentNode.insertBefore(obj1, obj2);

    // move obj2 to right before where obj1 used to be
    temp.parentNode.insertBefore(obj2, temp);

    // remove temporary marker node
    temp.parentNode.removeChild(temp);
}

<button onclick="doSwap()">Swap</button><br><br>

<ul>
    <li id="one">Item A</li>
    <li id="two">Item B</li>
    <li>Item C</li>
</ul>

edited May 13 '19 at 13:59

answered May 13 '19 at 13:06

Kobe

6,226
1
14
35

Hi, i have written my selector wrong here in SO, but not in my code (silly error). You'll notice it only returns a value if the accordion is open. If it is closed, it returns null. I have now edited my original post. thx – Daniel May 13 '19 at 13:17
Hey, this works. But how do I just apply it to this tbody on this page? And not edit other nodes on other pages – Daniel May 13 '19 at 13:22
I'm not sure I understand your question. What is it you want to do? – Kobe May 13 '19 at 13:23
I want to swap the dates around (the whole table rows) : 04-06. - 05.06 with 05.06 (they are the 6 and 7 in the list of the first table – Daniel May 13 '19 at 13:34
I tried the above code, and entered the ids: var id1 = '#9562abafa5c9b338834aa72c7bb085c5'; var id2 = '#3e4b4be3a0e5feb9b95a1980041cd376'; It didn't work. any ideas – Daniel May 13 '19 at 13:36
There is no need to use a # before each ID. – Kobe May 13 '19 at 13:51
I have added the example used by jfriend00 in my answer. – Kobe May 13 '19 at 13:59
I tried your use case on your website, and it works as intended **but** you have multiple elements with the same ID, so you may experience unexpected behaviour. – Kobe May 13 '19 at 14:03
Just to add to your great solution: Do you think it would be faster to use createDocumentFragment instead of createElement? – Daniel May 21 '19 at 12:23
Honestly, I don't know. I came across this article: https://stackoverflow.com/questions/3397161/should-i-use-document-createdocumentfragment-or-document-createelement I think that if it's not broken, don't try to fix it. If you are only calling this function once or twice, performance isn't really an issue and I wouldn't worry about it. – Kobe May 21 '19 at 12:27

score 0 · Answer 2 · answered May 13 '19 at 13:48

Selector path is false
Place a click event on the "li" element you want to watch, because initially "is-expanded" class is not available to the DOM on page load.

".querySelectorAll" not "querySelector"

       let accordianSection = document.querySelectorAll("#site-wrapper > div > div > main > article > section > ul.accordion ")[0];
       accordianSection.addEventListener( "click", function(){

       let selectedTbody = document.querySelectorAll("#site-wrapper > div > div > main > article > section > ul > li.is-expanded > ul > li > table > tbody ")[0];

         console.log(selectedTbody);

        });

How to apply JS to an (openned) accordion, when it is closed on DOM load

2 Answers2