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.
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> Column Input Type</option><option> Simple Text Input</option><option> Descriptive Text Input</option><option> Check/Tick</option><option> Progress Bar</option><option> Date Picker</option></select></div></div></div></div></div>');
x++; //text box increment
[B] $( "#accordion" ).accordion( "destroy" );
var ColumLength = $("span[id*=CoulmTitle]").length;
When you add the new element the original accordion is destroyed and then re-initialised.
$( "#accordion" ).accordion( "destroy" );
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
Thank you Paul O'B, this is the best I've come to resolving this to date, works perfectly!
The working fiddle!
...Now just another 10 million lines of code to go!
This topic is now closed. New replies are no longer allowed.