Accordion Element Javascript on Details page

App Development
1

Hey all,

I am trying to implement the Accordion style in a Details page… The components which I want to show are - component_183 in first

  • component 167 in second
  • component 145 in third.

The walkthrough is listed here: Add a collapsible acco... | Tadabase

The last step contains the following JS:

$(document).ready(function(){
$(‘.collapsible’).collapsible();
$(‘#x_element_page_4_20’).appendTo(‘#first’);
$(‘#x_element_page_4_36’).appendTo(‘#second’);
$(‘#x_element_page_4_38’).appendTo(‘#third’);
});

So I pasted this code:
$(document).ready(function(){
$(‘.collapsible’).collapsible();
$(‘component_183’).appendTo(‘#first’);
$(‘component_167’).appendTo(‘#second’);
$(‘component_145’).appendTo(‘#third’);
});

What am I doing wrong?

2

Without knowing the specifics, I would say: it doesn’t work with components. You really have to go into the “inspect” of your browser (right click and chose inspect in Google Chrome) and get those x_elements

3

There is no ID called component_x, you’d need to use the ID like @Peter explained. YOu can do so by inspecting from the app side.

As a side note, with the release of our AI we are adding some more classes and IDs to make elements more targeted.