"Dynamic Accordion Panel Making, Dynamic Tree Making"
Bootstrap 3.3.0 Snippet by Rezaul44

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="col-md-12">
<!-- Horizontal Form -->
<div class="panel panel-success">
<div class="panel-header with-border">
<h2 class="panel-title text-center">Add Category</h2>
</div>
<!-- /.panel-header -->
<!-- form start -->
<form class="form-horizontal">
<div class="panel-body">
<div class="panel-group" id="accordion" role="tablist"
aria-multiselectable="true">
</div>
<div class="col-md-12 text-center" style="margin-top:15px;">
<button class="btn btn-success" id="addButton" value=""><span class="glyphicon glyphicon-plus"></span> Add New Field</button>
</div>
</div>
<!-- /.panel-body -->
<div class="panel-footer">
<div class="col-sm-offset-3 col-sm-6 text-center">
</div>
</div>
<!-- /.box-footer -->
</form>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#accordion .panel-heading {
padding: 0;
}
#accordion .panel-title>a {
display: block;
padding: 0.4em 0.6em;
outline: none;
font-weight: bold;
text-decoration: none;
}
#accordion .panel-title>a.accordion-toggle::before, #accordion a[data-toggle="collapse"]::before
{
content: "\e113";
float: left;
font-family: 'Glyphicons Halflings';
margin-right: 1em;
}
#accordion .panel-title>a.accordion-toggle.collapsed::before, #accordion a.collapsed[data-toggle="collapse"]::before
{
content: "\e114";
}
#accordion.panel-group .panel{
margin-top: 5px;
}
#accordion .actions_div > a {
font-size: 14px;
margin-right: 15px;
}
#accordion .actions_div > a.exit-btn {
color:#dd4b39;
}
#accordion .remove_field.exit-btn{
color:#dd4b39;
margin-left:7px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function(){
var counter = 1;
var wrapper = $("#accordion");
$("#addButton").on("click", function(e){
e.preventDefault();
var catgName = prompt("Please Add your category name");
if(catgName == ''){
catgName = 'Catg#'+counter;
}
if(catgName != null){
var ariaExpanded = false;
var expandedClass = '';
var collapsedClass = 'collapsed';
if(counter==1){
ariaExpanded = true;
expandedClass = 'in';
collapsedClass = '';
}
$(wrapper).append('<div class="col-sm-12" style="margin-bottom: 0;"><div class="panel panel-default" id="panel'+ counter +'">' +
'<div class="panel-heading" role="tab" id="heading'+ counter +'"><h4 class="panel-title">' +
'<a class="'+collapsedClass+'" id="panel-lebel'+ counter +'" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse'+ counter +'" ' +
'aria-expanded="'+ariaExpanded+'" aria-controls="collapse'+ counter +'"> '+catgName+' </a><div class="actions_div" style="position: relative; top: -26px;">' +
'<a href="#" accesskey="'+ counter +'" class="remove_ctg_panel exit-btn pull-right"><span class="glyphicon glyphicon-remove"></span></a>' +
'<a href="#" accesskey="'+ counter +'" class="edit_ctg_label pull-right"><span class="glyphicon glyphicon-edit "></span> Edit</a>' +
'<a href="#" accesskey="'+ counter +'" class="pull-right" id="addButton2"> <span class="glyphicon glyphicon-plus"></span> Add child category</a></div></h4></div>' +
'<div id="collapse'+ counter +'" class="panel-collapse collapse '+expandedClass+'"role="tabpanel" aria-labelledby="heading'+ counter +'">'+
'<div class="panel-body"><div id="TextBoxDiv'+ counter +'"></div><a class="btn btn-xs btn-primary" accesskey="'+ counter +'" id="addButton3" ><span class="glyphicon glyphicon-plus"></span> Add New Attributes</a>' +
'<a class="btn btn-xs btn-success" accesskey="'+ counter +'" id="ajax_submit_button" >Done</a></div></div></div></div>');
counter++;
}
});
var x = 1;
$(wrapper).on("click","#addButton2", function(e){
e.preventDefault();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Hello, will you please let me know how we can fetch the values of this dynamic code in PHP?

Rajkumar Patwari () - 7 years ago - Reply 0