Ok, let’s leave the
characters where they are then.
Back to your script, I made the following changes:
I bumped the versions of jQuery and jQuery UI. I also extracted the JS into its own file:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
Then, in the JavaScript I did the following:
var $newRow = $("#accordion").html();
$("#AddButton").on("click", function(event){
event.preventDefault();
$("#accordion").append($newRow).accordion("refresh");
});
Now $newRow
holds a reference to the HTML we need to insert when a user clicks on “Add New”, so we can get rid of:
$(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="RemoveSection" style="z-index:99999;position:absolute;margin-left:430px;top:7px;width:32px;height32px;"><a href="#" class="removeclass"><span class="ui-icon ui-icon-circle-close"></span></a></span><span class="ui-icon ui-icon-triangle-1-e"></span><a href="#"><span id="accordionheadder">Column 1</span></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"><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>')
;
Although, for this to work fully, I had to change a couple of ids into classes (as ids are unique to a page).
We can also take advantage of the .refresh() method to avoid permanently destroying and re-initializing the accordion.
Here’s what we have so far:
<!DOCTYPE HTML>
<html>
<head>
<base href="http://rafflebananza.com/assets/global/plugins/SlickGrid-master/examples/" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SlickGrid example 5: Refactoring</title>
<link rel="stylesheet" href="../slick.grid.css" type="text/css" />
<link rel="stylesheet" href="../controls/slick.pager.css" type="text/css" />
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" />
<link rel="stylesheet" href="examples.css" type="text/css" />
<link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css" />
<style>
.removeSection{
z-index: 99999;
position: absolute;
margin-left: 430px;
top: 7px;
width: 32px;
}
.pixels, .percentage{
width: 80px;
float: left;
}
div.divider{
height: 27px;
width: 35px;
float: left;
padding-top: 10px;
text-align: center;
font-size: 17px;
color: #CCC;
}
.accordionHeader{
position: relative;
left: 15px;
}
</style>
</head>
<body>
<div>
<div class="options-panel">
<strong>Edit Columns</strong>
<hr/>
<div id="accordion">
<div class="group">
<h3>
<span class="removeSection"><a href="#" class="removeclass"><span class="ui-icon ui-icon-circle-close"></span></a></span>
<a href="#" class="headertitle"><span class="accordionHeader">Column 1</span></a>
</h3>
<div>
<div class="group">
<div class="boo">
<span class="columnTitle">Column 1</span><br/>
<div class="row">
<input type="text" name="mytext[]" class="columnTitle" placeholder="Column Title">
<label>Please enter the title for the data under this column</label>
</div>
<div class="row">
<input type="number" name="mytext[]" class="pixels" placeholder="px">
<div class="divider">or</div>
<input type="number" name="mytext[]" class="percentage" placeholder="%">
<label>Please enter initial (page load) width for this column</label>
</div>
</div>
<div class="row">
<div class="dropdown">
<select name="age">
<option selected>
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>
</div>
<div class="AddNewColumn" id="AddButton">
<div class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons ui-sortable" role="tablist">
<div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
<div class="group">
<h3>
<span class="ui-icon ui-icon-plus"></span>
<a href="#">Add New</a>
</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="../lib/jquery.event.drag-2.2.js"></script>
<script>
function create_accordion(str) {
$(str)
.accordion({
header: "> div > h3",
heightStyle: "content",
active: false,
collapsible: true,
})
.sortable({
axis: "y",
handle: "h3",
cancel: ".RemoveSection",
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children("h3").triggerHandler("focusout");
}
});
}
var $newRow = $("#accordion").html();
$("#AddButton").on("click", function(event){
event.preventDefault();
$("#accordion").append($newRow).accordion("refresh");
});
create_accordion("#accordion");
</script>
</body>
</html>
Demo
The next thing to do is to limit the amount of new accordions that may be added.
In your code you had set it to 8. This meant that the user could add 8, but deleted panels also counted towards the total.
Is it your intention to have deleted panels include in the total?