How can i disable a link after clicking on it once with jquery . on clicking the link its adding an input field inside a div with unique id. I am getting the values in a dropdown from a variable.
$(document).ready(function() {
var count = 1;
$(".block").on('click', function(){
$("#textInput").append(
'<div class="cgparent" id="input'+count+'">' +
'<div class="col-md-8">' +
'<input class="form-control" type="text">' +
'</div>' +
'<div class="col-md-4">' +
'<button style="margin-right: 5px" class="btn btn-info" id="edittext"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
'<button class="btn btn-danger" type="button" id="removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
'</div>' + '<br><br>' +
'</div>'
).show();
count++;
});
});
<?php if ($table_name == "questions") {?>
<div class="dropdown" >
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Add Block
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<?php
$question_fields = $this->db->list_fields('questions');
for ($i=0; $i<count($question_fields); $i++){?>
<li><a class="block" ><?php echo $question_fields[$i]?></li>
<?php } ?>
</ul>
</div>
<?php } ?>
If adding some CSS is ok for you this is the simplest I had found:
Javascript:
$(document).on('click', '#buttonSelector', function () {
$(this).addClass('disabled');
});
CSS:
.disabled {
/* if you also want it to fade a bit:
opacity: 0.5
*/
pointer-events: none;
cursor: default;
}
Using the following code will set a variable true once the link is clicked. After the link is clicked again it will ignore the click.
$(document).ready(function() {
var count = 1;
var clicked = false;
$(".block").on('click', function(e){
if(clicked) {
e.preventDefault();
}
clicked = true;
$("#textInput").append(
'<div class="cgparent" id="input'+count+'">' +
'<div class="col-md-8">' +
'<input class="form-control" type="text">' +
'</div>' +
'<div class="col-md-4">' +
'<button style="margin-right: 5px" class="btn btn-info" id="edittext"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
'<button class="btn btn-danger" type="button" id="removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
'</div>' + '<br><br>' +
'</div>'
).show();
count++;
});
});
I would do it by setting a counter. If the counter is higher than zero, that means the link has been clicked.
<a class="once-only" href="/do-stuff">Click me</a>
<script type="text/javascript">
$(document).ready(function ($) {
var clicked = 0;
$(document).on('click', '.once-only', function () {
if (clicked != 0) {
return false;
}
var clicked = clicked + 1;
});
});
</script>
Update
The comments brought this solution:
<script type="text/javascript">
$(document).ready(function ($) {
$(document).on('click', '.once-only', function () {
$(this).contents().unwrap();
});
});
</script>
The above will simply remove the anchor.
Related
I'm trying to created a dynamic form in rails with a little bit of javascript I have a problem I only get one row in the output when using pry apparently it's because I have the same params for every field input since I use jQuery .clone, maybe someone has struggled with something similar can share some knowledge, how to dynamically add index to params in this form with javascript ?
#extends('Admin.master')
#section('content')
<div class="p-5">
<h3><i class="fas fa-cog ml-2"></i>Setting</h3><hr>
<form action="{{ route('settings.update', $setting->id) }}" method="POST" >
#csrf
#method('PUT')
<div id="showDynamic">
</div>
</form>
</div>
#endsection
#section('script')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
let count = 1;
$('.add').click(function(){
count++;
dynamic(count);
});
dynamic(count);
function dynamic(number) {
var html = '' +
'<div class="row">\n' +
'<div class="col-md-4">\n' +
'<input class="form-control" placeholder="Name">\n' +
'</div>\n' +
'<div class="col-md-4">\n' +
'<input class="form-control" placeholder="Link">\n' +
'</div>\n' +
'<div class="col-md-2">\n' +
'<a class="btn btn-primary" id="add">Add</a>\n' +
'<a class="btn btn-danger" id="delete">Delete</a>\n' +
'</div>\n' +
'</div>';
$('#showDynamic').append(html);
}
});
</script>
#endsection
1st id must be unique .. So change id="add" and id="delete" to classes class="btn btn-primary add"
2nd event-binding-on-dynamically-created-elements After changing the id to class use $(document).on('click' , '.add' , function(){ //code here })
Your code should be
<script>
$(document).ready(function(){
let count = 1;
$(document).on('click' , '.add' , function(){
count++;
dynamic(count);
});
dynamic(count);
function dynamic(number) {
var html = '' +
'<div class="row">\n' +
'<div class="col-md-4">\n' +
'<input class="form-control" placeholder="Name">\n' +
'</div>\n' +
'<div class="col-md-4">\n' +
'<input class="form-control" placeholder="Link">\n' +
'</div>\n' +
'<div class="col-md-2">\n' +
'<a class="btn btn-primary add">Add</a>\n' +
'<a class="btn btn-danger delete">Delete</a>\n' +
'</div>\n' +
'</div>';
$('#showDynamic').append(html);
}
});
</script>
$(document).ready(function(){
let count = 1;
$(document).on('click' , '.add' , function(){
count++;
dynamic(count);
});
dynamic(count);
function dynamic(number) {
var html = '' +
'<div class="row">\n' +
'<div class="col-md-4">\n' +
'<input class="form-control" placeholder="Name">\n' +
'</div>\n' +
'<div class="col-md-4">\n' +
'<input class="form-control" placeholder="Link">\n' +
'</div>\n' +
'<div class="col-md-2">\n' +
'<a class="btn btn-primary add">Add</a>\n' +
'<a class="btn btn-danger delete">Delete</a>\n' +
'</div>\n' +
'</div>';
$('#showDynamic').append(html);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="showDynamic"></div>
I have created a dropdown menu which is being populated dynamically when the button is pressed however the content is not being displayed until the button is clicked several times, once it has been displayed it works ok.
The HTML is:
$('#btnGroupDrop1').on( 'click', $('#availableVans'), function() {
getAvailableVans();
});
function getAvailableVans() {
$.ajax({
url: "${ctx}/str/getDeliveryVans.jx?${_csrf.parameterName}=${_csrf.token}",
type: 'POST',
contentType: 'application/json',
success: function(data) {
var buttonHtml = '<button id="buttonGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Add new list for:</button>\n';
var divHeader = '<div id="availableVans" class="dropdown-menu" aria-labelledby="buttonGroupDrop1">\n';
var vanList = "";
$.each( data.vans ,function( idx, van ){
var userVan = '<a class="dropdown-item newListBtn" data-id="' + van.id + '" data-color="' + van.strelColor + '" data-user="' + van.username + '">' + van.username + '</a>';
vanList = vanList + userVan + "\n";
});
var allVans = '<a class="dropdown-item newListBtn" data-id="0" data-color="" data-user="ALL VANS">ALL VANS</a>\n';
var divFooter = '</div>';
$('#buttonGroup').html( buttonHtml + divHeader + vanList + allVans + divFooter);
},
error: function(data,status,er) {
alert("Failure to retrieve list of vans");
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttonGroup" class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Add new list for:
</button>
<div id="availableVans" class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<c:forEach var="van" items="${map.vans}" varStatus="status">
<a class="dropdown-item newListBtn" data-id="${van.id}" data-color="${van.strelColor}" data-user="${van.username}">${van.username}</a>
</c:forEach>
<a class="dropdown-item newListBtn" data-id="0" data-color="" data-user="">ALL VANS</a>
</div>
</div>
after the click should be a selector and you wrote an element
change this code
$('#btnGroupDrop1').on( 'click', $('#availableVans'), function() {
getAvailableVans();
});
to
$(document).on( 'click', '#btnGroupDrop1', function() {
getAvailableVans();
});
i have a problem to reference an identifier of a DIV. I allow to add a div with a text field and a button to delete the text field, and i set a id to the DIV like an array with this code:
$('#aggiungi').on('click',function () {
$count ++;
$('#corsi').append(
'<div class="form-group row" id="corso['+$count+']>' +
'<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
'<div class="col-sm-10 form-inline">' +
'<input type="text" class="form-control" id="corso" name="corso['+ $count + ']"/>' +
'<a class="btn btn-default" id="eliminacorso['+$count+']" aria-label="Elimina">' +
'<i class="fa fa-times" aria-hidden="true"></i>' +
'</a>' +
'</div>' +
'</div>' +
'');
});
So.. if i press on the botton at the at the side of the text area, i'll call a function that will remove it.
The skeleton of the function is the follow:
$('#eliminacorso[]').on('click', function() {
$count --;
$('#corso[]').remove();
});
So my ask is: How can i insert between the square brackets the right identifier of the div?
A better choice is:-
1.Instead of using id use button class
2.And then use event delegation concept like below:-
$(document).on('click','.btn-default',function(){
$(this).closest('.form-group').remove();
});
Reference:- https://api.jquery.com/closest/
Use as below the script that add DIV. Remove '[' from id attribute from div tag and anchor tag as below
$('#aggiungi').on('click',function () {
$count ++;
$('#corsi').append(
'<div class="form-group row" id="corso'+$count+'>' +
'<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
'<div class="col-sm-10 form-inline">' +
'<input type="text" class="form-control" id="corso" name="corso['+ $count + ']"/>' +
'<a class="btn btn-default" id="corso'+$count+'" aria-label="Elimina">' +
'<i class="fa fa-times" aria-hidden="true"></i>' +
'</a>' +
'</div>' +
'</div>' +
'');
});
And then script to get the clicked id and remove the matched div on click of button as below
$('.btn').on('click', function() {
var selectedId = $(this).attr('id');
$('#'+selectedId).remove();
});
Try below code.It may help you
var $count =0
$('#aggiungi').on('click',function () {
$count ++;
$('#corsi').append(
'<div class="form-group row" id="corso_'+$count+'">' +
'<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
'<div class="col-sm-10 form-inline">' +
'<input type="text" class="form-control" id="corso" name="corso_'+ $count + '"/>' +
'<a class="btn btn-default" id="eliminacorso_'+$count+'" aria-label="Elimina" onclick="remove(this);">' +
'Test' +
'</a>' +
'</div>' +
'</div>' +
'');
});
function remove(aRemove){
console.log(aRemove);
var divid = aRemove.id.replace("eliminacorso_","corso_");
$("#" + divid).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="aggiungi"> Click ME </button>
<div id="corsi">
</div>
https://codepen.io/vino4all/pen/vZrQEX
Try this code.
<button id="aggiungi">Click</button>
<div id="corsi"></div>
Add a class attribute to the <a> tag.
var $count = 0;
$('#aggiungi').on('click',function () {
$count ++;
$('#corsi').append(
'<div class="form-group row" id="corso['+$count+']>' +
'<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
'<div class="col-sm-10 form-inline">' +
'<input type="text" class="form-control" id="corso" name="corso['+ $count + ']"/>' +
'<a class="btn btn-default delBtn" id="eliminacorso['+$count+']" aria-label="Elimina"><span>X</span>' +
'<i class="fa fa-times" aria-hidden="false"></i>' +
'</a>' +
'</div>' +
'</div>' +
'');
});
$('#corsi').on('click', '.delBtn', function() {
console.log('this :'+$(this));
$count --;
$(this).parent().parent().remove();
});
Notice the usage of on function.
It should be like below
$('#corsi').on('click', '.delBtn', fun);
You can use something like this
var count = 3;
$('button').click(function(){
count--;
$($('.corso')[count]).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="corso">1. <input type="text" /></div><br />
<div class="corso">2. <input type="text" /></div><br />
<div class="corso">3. <input type="text" /></div><br />
<br />
<button>Remove</button>
Try this:
var $count = 0
$('#aggiungi').on('click', function () {
$count++;
let divId = `input_div_${$count}`;
let html = `<div class="form-group row" id="${divId}">
<label class="col-sm-2 col-form-label" for="corsi">Input ${$count}</label>
<div class="col-sm-10 form-inline">
<input type="text" class="form-control" id="input" name="${divId}"/>
<button type="button" id="remove_btn_${$count}" aria-label="Elimina" onclick="remove('${divId}');">
remove
</a>
</div>
</div>`;
$('#main-div').append(html);
});
function remove(removeDivId) {
console.log(removeDivId);
$("#" + removeDivId).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="aggiungi"> Click ME </button>
<div id="main-div">
</div>
My html code is like this :
<input type='file' multiple style="display: none;" id="upload-file" />
<?php
for($i=0;$i<5; $i++) { ?>
<div class="img-container" id="box<?php echo $i ?>" data-status="0">
<button type="submit" class="btn btn-primary upload-add-product"<?php
if($i!=0) echo' style="display:none;"'; ?> >
<i class="glyphicon glyphicon-plus"></i>
</button>
<button style="display: none;" class="btn btn-danger show-button">
<i class="glyphicon glyphicon-trash"></i>
</button>
</div>
<?php } ?>
My javascript code is like this :
...
$(document).on('click',".show-button",function(){
var imgTmpl = '<div class="img-container">'+
'<button style="display: none;" type="submit" class="btn btn-danger show-button">'+
'<i class="glyphicon glyphicon-trash"></i>'+
'</button></div>';
$(this).parent().remove();
$('body').append(imgTmpl);
});
Demo and full code is like this : http://phpfiddle.org/main/code/9kb1-r47h
My problem is : when I uploaded 5 images. Then I delete 1 image. Plus icon does not appear again.
How can I solve this problem?
change your code like this , it is work for me,
<style type="text/css">
.img-container {
width: 162px;
height: 142px;
border: 2px solid black;
float: left;
margin-right: 5px;
position: relative;
}
.delete-button {
position: absolute;
left: 0;
}
.upload-add-product {
margin-top: 55px;
margin-left: 55px;
}
.img-container .show-button { position: absolute; top: 0; left: 0; }
</style>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<input type='file' multiple style="display: none;" id="upload-file" />
<div class="images-area">
<?php
for($i=0;$i<5; $i++) { ?>
<div class="img-container" id="box<?php echo $i ?>" data-status="0" data-index="<?=$i?>">
<?php if ($i == 0): ?>
<button type="submit" class="btn btn-primary upload-add-product">
<i class="glyphicon glyphicon-plus"></i>
</button>
<?php endif; ?>
</div>
<?php } ?>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).on('click','.upload-add-product',function(){
$("#upload-file").click();
});
$(function () {
$(":file").change(function () {
var noOfFiles = this.files.length;
for(var i=0; i < noOfFiles; i++) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[i]);
}
});
});
function imageIsLoaded(e) {
var imgTmpl = '';
var IsImgAdded=false;
$('.img-container').each(function(){
if($(this).find('img').length==0 && IsImgAdded==false){
$(this).append(imgTmpl);
IsImgAdded=true;
$(this).attr('data-status',1);
//$(this).find('.upload-add-product').hide();
//$(this).find('.show-button').show();
var i = $(this).closest('.img-container').data('index');
var imgTmpl ='<img height="142" width="162" src='+e.target.result+'>'+
'<button type="button" class="btn btn-danger delete-button">'+
'<i class="glyphicon glyphicon-trash"></i>'+
'</button>';
$('#box'+i).html('');
$('#box'+i).append(imgTmpl);
if(i<5) {
$('#box'+(i+1)).html('<button type="button" class="btn btn-primary upload-add-product">'+
'<i class="glyphicon glyphicon-plus"></i>'+
'</button>');
}
$('.img-container').each(function(){
if( $(this).attr('data-status') != 1){
$(this).find('.upload-add-product').show();
return false;
}
})
}
});
};
$(document).on('click','.delete-button',function(){
var i = $(this).closest('.img-container').attr('data-index');
$('#box'+i).remove();
$('.images-area').append('<div class="img-container" data-status="0"></div>');
var blank = 0;
$('.img-container').each(function(i){
$(this).attr({'id':'box'+i,'data-index':i});
if(($(this).attr('data-status') == 0) && (blank == 0)) {
console.log("k");
blank = i;
}
});
if($('.img-container').find('.upload-add-product').length == 0) {
$('#box'+blank).append('<button type="button" class="btn btn-primary upload-add-product">'+
'<i class="glyphicon glyphicon-plus"></i>'+
'</button>');
}
});
</script>
Demo is here
May be it helps you...
Reason
You didn't even add the + button back in. I'd also suggest you look at template literals to help with formatting and multi-lined code.
You need to make sure that when you reach the end, that instead of having it set as none and waiting for something else to prompt it back to block or w/e, show it as block or w/e, intially
Updated parts:
$(document).on('click',".show-button",function(){
let pos;
let i = 0;
let parent = $(this).parent()[0];
$(".img-container").each( function() {
if (this == parent)
{
pos = i;
}
i++;
});
let show = (pos === 4) ? "block" : "none";
var imgTmpl = '<div class="img-container" data-status="0">'+
'<button style="display: ' + show +'" type="submit" class="btn btn-primary upload-add-product" onclick="upload_click();">' +
'<i class="glyphicon glyphicon-plus"></i>' +
'</button>' +
'<button style="display: none;" type="submit" class="btn btn-danger show-button">'+
'<i class="glyphicon glyphicon-trash"></i>'+
'</button></div>';
//console.log($(this).parent());
$(this).parent().remove();
$('body').append(imgTmpl);
});
function upload_click()
{
$("#upload-file").click();
}
http://phpfiddle.org/main/code/xzq8-h3ub
Prerequisite:
Assign id to your delete button
Then On click of delete button, check if id =0 and accordingly apply style to your plus button as below.
Last step is to append newly created plus button to current div.
$(".btn-danger").click(function(){
$id=this.id;
if($id!=0){
var r= $('<button type="submit" class="btn btn-primary upload-add-product" style="display:none;">
<i class="glyphicon glyphicon-plus"></i>
</button>');
}
else{
var r= $('<button type="submit" class="btn btn-primary upload-add-product">
<i class="glyphicon glyphicon-plus"></i>
</button>');
}
$(this).parent().append($r);
});
Let me know if this doesn't work.
I found this Bootstrap Accordion Link. It is working fine to add new div accordion. But my problem here is after I refresh the page it back to normal. I try to apply this code to mine to see what is the effect.
It is possible to add a permanent div accordion?.
I plan to do this accordion because I have a File Maintenance for the Positions like Senators , President.. etc.
$(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;">' +
'<span class="glyphicon glyphicon-remove"></span>' +
'<span class="glyphicon glyphicon-edit "></span> Edit' +
' <span class="glyphicon glyphicon-plus"></span> Add child category</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();
var parentId = $(this).attr('accesskey');
var parentPanel = '#panel' + parentId;
var catgName = prompt("Please Add your category name");
if (catgName == '') {
catgName = ' P#' + parentId + ' Catg#' + counter;
}
if (catgName != null) {
var ariaExpanded = false;
var expandedClass = '';
var collapsedClass = 'collapsed';
$(wrapper).find(parentPanel).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;">' +
'<span class="glyphicon glyphicon-remove"></span>' +
'<span class="glyphicon glyphicon-edit"></span> Edit' +
' <span class="glyphicon glyphicon-plus"></span> Add child category</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>');
x++;
counter++;
}
});
$(wrapper).on("click", ".remove_ctg_panel", function(e) {
e.preventDefault();
var accesskey = $(this).attr('accesskey');
$('#panel' + accesskey).remove();
counter--;
x--;
});
var y = 1;
$(wrapper).on("click", "#addButton3", function(e) {
e.preventDefault();
var accesskey = $(this).attr('accesskey');
y++;
$('#panel' + accesskey).find('#TextBoxDiv' + accesskey).append('<div class="col-md-12 form-group"><input type="text" name="ctgtext[]" class="form-control" style="width: 40%;float: left;"/><span class="glyphicon glyphicon-remove"></div>');
});
$(wrapper).on("click", ".remove_field", function(e) {
e.preventDefault();
$(this).parent('div').remove();
y--;
})
$(wrapper).on("click", ".edit_ctg_label", function(e) {
var panelId = $(this).attr('accesskey');
var catgName = prompt("Please Change your category name");
if (catgName == '') {
return false;
}
if (catgName != null) {
$('#panel' + panelId).find("#panel-lebel" + panelId).html('').html(catgName);
}
});
});
#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;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</div>
</div>
Thanks.