Is it possible to append a form field to a collapsible accordian?

App Development
1

Not sure this is possible, as i´m trying to do this within an edit form page, however i´ve got several Rich text fields that take up lots of screen space. I´ve searched the element id (in this case field id(‘field_block_field_468’) as I would normally to append it to the accordian in the javascript view, however it doesn´t append. I´ve tried various permatations including trying to reference the element in the page to no avail. I imagine and it is possible if anyone can help?

image
image

image
image1369×986 339 KB

2

I’ve never tried but I’m assuming it would be possible. Can you share an image of the page builder to see how everything is setup?

You can try removing the “_” between the page element and the field block. Try replacing the whole string with #x_element_page_586_3 .field_block_field_468

3

Thanks for your interest, i´ve just tried both your suggestions, unfortunately to no avail.

image
image1826×928 133 KB

image
image1472×951 304 KB

I´ve also tried using “field_block_field_468” on it´s own and also just “field_468”.

Like you said I would expect this to be possible…any other ideas would be more than welcome.

4

So I think with the current code provided, it’s not possible to use the accordion inside a form.

I tried to replicate what you have the best I could by making 2 columns on a page. In the left column, I have an edit form with every field except the Rich Text fields.

In the right column, I have an HTML component with the accordion code, followed by 3 forms. Each form has 1 rich text field in it.

Saving a value into any of the Rich Text fields is immediately reflected in the details component above (with the exception of clearing the value to blank - that appears to be bugged). I also hid the “success” message because it was blocking the accordion tabs below.

screenshot-build.tadabase.io-2020.12.01-12_50_50
screenshot-build.tadabase.io-2020.12.01-12_50_502180×1649 221 KB

Here’s a demo link you can try.
https://dataflowstudios.tadabase.io/theme#!/accordion/sample-data-table-details-1/5m9N0njzqk

Edit: Sorry I forgot to add that I used the from ID for the JavaScript section

$(document).ready(function(){
    $('.collapsible').collapsible();
    $('#x_element_page_9_9').appendTo('#first');
    $('#x_element_page_9_10').appendTo('#second');
    $('#x_element_page_9_11').appendTo('#third');
});
5

Hi Tim, sorry for the delay in responding i´ve been off for a couple of days. That´s a very good workround you´ve come up with, I will take it. A big thankyou, you´ve been really helpful!