I've made a JQuery Sortable Accordion: Add new accordion level not working - Sourc

JavaScript
1

Hiya Everyone,

I’ve made a JQuery sortable accordion and have implemented a feature to add an additional level. I’ve but my brain to extensive work to create this and all appears to work, viewing source and whatnot to implement a new level, however upon doing so, the new level will not expand. I asked for help on Web Masters Stack Exchange posting this question, unfortunately it was put on hold as off-topic, but fortunately someone submitted an answer before this occurred.

The answer explains why it does not work and I should look into using AJAX to resolve, however I do not have a clue how to use AJAX and although I’ve been searching Google, I cannot find anything similar enough to help me enough to fix my website feature. I’ve created a JSFiddle of what I have done so far.

In addition to the above, but not so important; The “+ Add New” should look exactly the same as the accordion headers and behave the same way for hover.

I would be extremely grateful for some help to resolve as I have put my skills to the maximum to achieve what I’ve accomplished so far to create this small section of my website I’m working on for a charitable organisation.

Best Regards,
Tim

2

Hi,

Until someone who knows what they are doing arrives maybe this will be of some use.


 $(InputsWrapper).append('<div class="group"><h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="0"><span class="ui-icon ui-icon-triangle-1-e"></span><a href="#">Column One</a></h3><div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;"><div class="group"><div class="boo"><div class="overlay"></div><span id="CoulmTitle">Column 1</span><br><div class="row"><input type="text" name="mytext[]" id="field_1" value="Column Title"><label for="username">Please enter the title for the data under this column</label></div><div class="row"><input type="text" name="mytext[]" id="field_1" value="Column Width (px)"><label for="username">Please enter initial (page load) width for this column</label></div></div><div class="row"><div class="dropdown"><select id="age" name="age"><option>&nbsp;&nbsp;&nbsp;&nbsp;Column Input Type</option><option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Simple Text Input</option><option>&nbsp;&nbsp;Descriptive Text Input</option><option> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Check/Tick</option><option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Progress Bar</option><option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Date Picker</option></select></div></div></div></div></div>');
                               x++; //text box increment
                           }
													
													[B] $( "#accordion" ).accordion( "destroy" );
													 create_accordian('#accordion');[/B]
                           var ColumLength = $("span[id*=CoulmTitle]").length;

When you add the new element the original accordion is destroyed and then re-initialised.


 $( "#accordion" ).accordion( "destroy" );
 create_accordian('#accordion');

It seems to work but I’ve a feeling it may be a bad approach so maybe wait for a reply from Paul or Pullo instead :slight_smile:

3

Thank you Paul O’B, this is the best I’ve come to resolving this to date, works perfectly!

4

The working fiddle!

…Now just another 10 million lines of code to go! :stuck_out_tongue: