Prepending a div to another div dynamically - javascript

I am trying to have it when I click on "Add Exercise", the a new collapsible bootstrap div will be added inside my card div. each time the button is clicked. I have been trying for a while now and reading up other questions on here but I cannot seem to get it to work.
I added my code to jsfiddle. Cany anyone help me get this working finally?
https://jsfiddle.net/dmngpo8e/4/
$('input[name="queue"]').click(function() {
$("<div class='panel-group'><div class='panel panel-default'><div class='panel-heading'><h4 class='panel-title'><a data-toggle='collapse' href='#collapse1'>Collapsible panel</a></h4></div><div id='collapse1' class='panel-collapse collapse'><div class='panel-body'>Panel Body</div><div class='panel-footer'>Panel Footer</div></div></div></div>").html('item').appendTo('card');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<input class="btn teach_edit_header_buttons" style="font-family:Helvetica" name="queue" type="submit" value="Add Exercise">
<div class="card" style="padding:10px;background-color:#c7e0fc;">
</div>

.appendTo('card'); should be .appendTo('.card'); .. and by use html('item') before it it'll just change the whole div html with word item so you need to remove html('item')

Try by adding dot(class selector) before card
$('input[name="queue"]').click(function() {
$("<div class='panel-group'>" +
"<div class='panel panel-default'>" +
"<div class='panel-heading'>" +
"<h4 class='panel-title'>" +
"<a data-toggle='collapse' href='#collapse1'>Collapsible panel</a>" +
"</h4>" +
"</div>" +
"<div id='collapse1' class='panel-collapse collapse'>" +
"<div class='panel-body'>Panel Body</div>" +
"<div class='panel-footer'>Panel Footer</div>" +
"</div>" +
"</div>" +
"</div>").html('item').appendTo('.card');
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<input class="btn teach_edit_header_buttons" style="font-family:Helvetica" name="queue" type="submit" value="Add Exercise">
<div class="card" style="padding:10px;background-color:#c7e0fc;">
</div>

As #bkr and #Mohamed-Yousef already mentioned, you had a few issues with your code:
Remove .html('item') as it's overwriting the collapsible bootstrap div.
You were missing a dot in .appendTo('card'), should be .appendTo('.card').
Also, for the collapsible button to work after you add it, you also need Bootstrap's JS file, otherwise the collapsible bootstrap divs won't work (see code below).
$('input[name="queue"]').click(function() {
$("<div class='panel-group'><div class='panel panel-default'><div class='panel-heading'><h4 class='panel-title'><a data-toggle='collapse' href='#collapse1'>Collapsible panel</a></h4></div><div id='collapse1' class='panel-collapse collapse'><div class='panel-body'>Panel Body</div><div class='panel-footer'>Panel Footer</div></div></div></div>").appendTo('.card');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input class="btn teach_edit_header_buttons" style="font-family:Helvetica" name="queue" type="submit" value="Add Exercise">
<div class="card" style="padding:10px;background-color:#c7e0fc;">
</div>

Related

Bootstrap tooltip is not visible using javascript

I am new to Bootstrap. I am using bootstrap range slider and javascript in my program. Inspite of using following, I am not able to see tooltip of slider:
<input id = "cheapHFSlider" type="range" data-slider-min="0" data-slider-max="100" data-slider-step="1"
data-slider-tooltip="show" onchange="sliderChanged(this)">
<label id = "cheapHFSliderVal">
When I hover my cursor over that slider in Chrome's debugging mode, I can see that 'tooltip tooltip-main top' is being highlighted in Elements tab of debugger. Attaching the screen shot of above.
Related CSS and JS are:
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Bootstrap slider CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/css/bootstrap-slider.css">
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<!-- Bootstrap slider JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/bootstrap-slider.js"></script>
My script tag is:
<script type="text/javascript">
$(document).ready(function() {
$("#cheapHFSlider").slider().on('slide', function(_event) {
$("#cheapHFSliderVal").html(_event.value + "%");
});
$("#cheapHFSliderVal").html($("#cheapHFSlider").slider('getValue') + "%"); // set the initial value of slider in label
})
function sliderChanged(slider) {
switch(slider.id) {
case 'cheapHFSlider':
$("#cheapHFSliderVal").html(slider.value + "%");
break;
default:
console.log("Invalid slider '" + slider.id + "' !");
}
}
</script>
Please let me know where I am going wrong

dynamically creating buttons with dynamic id calling a function not working

The scenario is, a hyperlink below is toggling a modal as well as creating two buttons inside modal(using javascript having a dynamic id--inspect for button id).
The requirement is on the click of verifybtn0, the rejectbtn0 should disable and viceversa.
In plunker attached, alert is not reached(mentioned in plunker).
Here is, plunker link http://plnkr.co/edit/KgB8yPtcmxYJzQCWB3PJ?p=preview
For more understanding, have a look at plunker.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<script src="script.js"></script>
</head>
<body>
<div id="annexureModal" class="modal fade" role="dialog">
<div class="modal-dialog" style="width: 40%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" id="closebtn" >×</button>
<h4 class="modal-title">Annexure List</h4>
</div>
<div class="modal-body text-center" style="background-color: #fff;height: 500px;width:100px;">
<div class="col-xs-12 rmpm">
<table class="table" id="tableAnnexure" style="height:430px;">
<tbody>
<tr>
<td colspan= "2" style="">
<div class="" id="verifybtndiv" style='width:auto;float:left;background:red; '></div>
<div class="" id="rejectbtndiv" style='width:auto;float:left;background:green; '></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Annexure
<script type="text/javascript">
function createVerifyRejectbtn(id){
alert("annexureLink clicked");
var html= "";
html = "<button type='button' class='btn btn-success' id='verifybtn"+id+" ' onclick='disablebtn(this.id)' >Verify</button>";
$("#verifybtndiv").html(html);
html = "<button type='button' class='btn btn-warning' id='rejectbtn"+id+" ' onclick='disablebtn(this.id)' >Reject</button>";
$("#rejectbtndiv").html(html);
}
function disablebtn(id){
var idd = id;
// alert(typeof(idd));
alert(idd);
if(idd === "verifybtn0"){
alert("verifybtn0"); /* here alert is not reaching*/
document.getElementById(id).disabled = false;
document.getElementById("rejectbtn0").disabled = true;
}
else if(idd ==="rejectbtn0"){
alert("rejectbtn0"); /* here alert is not reaching*/
document.getElementById(id).disabled = false;
document.getElementById("verifybtn0").disabled = true;
}
}
</script>
</body>
</html>
First you need to understand how Javascript and DOM works.
When you load your page, the first thing that loads is DOM ( your HTML content ), then once DOM loads, all the javascript events (like Click, mouseover) are registered.
When you dynamically create HTML elements , the events will not be registered because your DOM has already loaded .
Inorder to rebind the newly inserted elements and events, you have to do Dynamic Binding using Jquery. Look at the below link on how to do it
Event binding on dynamically created elements?

Calling a form in a JSP page in another JSP page div through javascript

I am currently working on Spring tool Suite. And I have the following project structure.
I am trying to display the form that I have created in my tableSelectForm.jsp in a properties panel div that I have in my veditor.jsp view. I am trying to append the form by creating an iframe through javascript from the veditor.js script that I have under resources/js/taro/Customscripts and set the link to the tabelSelectForm.jsp and then append the iframe to the div in the veditor.jsp.
tabelSelectForm.jsp
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<form class="form-horizontal" id="tabelSelectForm">
<fieldset>
</head>
<body>
<!-- Form Name -->
<legend>Table Selection</legend>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-6 control-label"> Select a Table out of the options to start querying from that table</label>
<br>
<label class="col-md-4 control-label" for="streamSelect">Table</label>
<div class="col-md-4">
<select id="streamSelect" name="streamSelect" class="form-control">
<option value="voidopt">Select an option</option>
</select>
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="tableFormConfirmButton">Confirm</label>
<div class="col-md-8">
<button id="tableFormConfirmButton" name="tableFormConfirmButton" class="btn btn-primary">Confirm</button>
<button id="tableFormCancelButton" name="tableFormCancelButton" class="btn btn-danger">Cancel</button>
</div>
</div>
</fieldset>
</form>
</body>
</html>
veditor.jsp
...
<script src="resources/js/taro/Customscripts/veditor.js" type="text/javascript"></script>
...
<!--Container/Canvas-->
<div id="container" class="container">
</div>
<div style="float: left" class="property" id="propertypane">
<h1 class="toolbox-titlex" id="toolbox-titlex">Properties</h1>
<div class="panel" id="lot"></div>
</div>
veditor.js
...
function callTableForm(newAgent, i, e, mouseTop, mouseLeft,elemType)
{
$(".property").show();
$(".property").show();
var iframe = document.createElement('iframe');
iframe.frameBorder=0;
iframe.width="inherit";
iframe.height="inherit";
iframe.id="randomid";
document.getElementById("lot").appendChild(iframe);
$("property").show();
$(".toolbox-titlex").show();
$(".panel").show();
$( "#randomid" ).load( "/tableSelectForm.jsp" );
}
I am currently getting an output as shown here. Under the properties panel, I showld be able to display the form in tableSelectForm.jsp.
I doubt that I am encountering this error due to the incorrect link that I've set in the iframe as var link = "/tableSelectForm.jsp" in my veditor.js
This is the error that I am encountering.
And this is the Project structure along with the modified veditor.js script function.
I would really appreciate a solution to change this path so that I could diplay the form under the properties.
Thanks in advance.
This is will you need jquery.load, this is a better solution than using iframes.
$( "#result" ).load( "/your_jsp_page_html_conten.jsp" );

summernote editor not opening (laravel 5.2)

I am using summernote js in laravel 5.2.
In a form,when user clicks on edit button, summernote editor should open for the fields.Actually it was working for a single field but when i applied it for more than one field,its not working.
my view:
<form action="{{route('account')}}" id="acc" class="ac" method="post">
<div class="col-lg-3"><label>Estado</label>
#foreach($accounts as $account)
#if($user== $account->user)
{!! $account->estado !!}
<textarea style="display:none;" name="textfield4" id="textfield4"></textarea>
<div class="col-lg-2 estado " id="estado"></div>
#endif
#endforeach
</div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<section class="col-lg-3 "><label for="textfield5">I'm Good At:</label>
#foreach($accounts as $account)
#if($user== $account->user)
{!! $account->goodat !!}
<textarea style="display:none;" name="textfield5" id="textfield5"></textarea>
<div class="col-lg-2 col-md-2 es" id="goodat"></div>
#endif
#endforeach
<br /><div><button type="button" class="btn btn-info edit">Edit</button>
<button type="submit" class="btn btn-success" id="btn-send-message" >Save</button>
<input type="hidden" value="{{Session::token()}}" name="_token">
</div>
</form>
my script:
<script>
$(document).ready(function() {
var $estado = $('#estado');
var $goodat = $('#goodat');
var edit = function() {
$estado.summernote({focus: true});
$goodat.summernote({focus: true});
};
$('.edit').on('click', edit);
$("#acc").on('submit', function(e) {
e.preventDefault();
var self = this;
// lets check some stuff
console.log($estado);
console.log($estado.summernote('code'));
console.log($('#textfield4'));
console.log($('#textfield4').val());
console.log($('#textfield4').text());
var estado = $estado.summernote('code');
$("#textfield4").val(estado); //populate text area
var goodat = $goodat.summernote('code');
$("#textfield5").val(goodat); //populate text area
self.submit();
return false;
});
});
</script>
EDIT 1:
I've found out that, after clicking on save button ( which results in null values in db)(everytime a user logins) , edit button starts working perfectly.
EDIT 2:
after placing all links and scripts in head tag ,error: $ is not defined .
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="_token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{URL::to('src/css/crush.css')}}">
<link rel="stylesheet" type="text/css" href="{{URL::to('src/css/groups.css')}}">
<link rel="stylesheet" type="text/css" href="{{URL::to('src/css/Untitled-2.css')}}">
<link rel="stylesheet" type="text/css" href="{{URL::to('src/css/font-awesome.css')}}">
<link rel="stylesheet" type="text/css" href="{{URL::to('src/css/style.css')}}">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js" ></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
<script src="/src/js/myplace.js"></script>
<script src="{{URL::asset('src/js/script.js')}}"></script>
</head>
You wanted multiple textareas with summernote?
Take: (;
$(function() {
var $estado = $('#estado');
var $goodat = $('#goodat');
var isEditorsActive = false;
function activateEditors() {
$estado.summernote({
focus: true
});
$goodat.summernote({
focus: true
});
isEditorsActive = true;
}
function deactivateEditors() {
$estado.summernote('destroy');
$goodat.summernote('destroy');
isEditorsActive = false;
}
$('button.edit').click(function(e){
e.preventDefault();
(isEditorsActive)? deactivateEditors() : activateEditors();
});
$("form#ac").submit(function(e) {
e.preventDefault();
var $this = $(this);
if(isEditorsActive) {
var estado = $estado.summernote('code');
var goodat = $goodat.summernote('code');
$('#data-estado').html(estado);
$('#data-goodat').html(goodat);
}
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
<form action="{{route('account')}}" id="ac" class="ac" method="post">
<div class="row">
<div class="col-lg-3">
<label>Estado</label>
#foreach($accounts as $account)
#if($user== $account->user)
<div class="estado" id="estado" style="width:100%">
{!! $account->estado !!}
</div>
#endif
#endforeach
</div>
<div class="col-lg-3"></div>
<div class="col-lg-3">
<label>I'm Good At:</label>
#foreach($accounts as $account)
#if($user==$account->user)
<div class="goodat" id="goodat" style="width:100%">
{!! $account->goodat !!}
</div>
#endif
#endforeach
</div>
</div>
<button type="submit" class="btn btn-success save">Save</button>
<button class="btn btn-default edit">Edit</button>
</form>
ESTADO:
<div id="data-estado">
</div>
GOOD AT:
<div id="data-goodat">
</div>
but after this You still cannot get the data that inside these textareas - so really something is wrong with Your blade template
http://num8er.me/summernote.html
I think you could have some asynchronous issues here, since it works sometimes, and sometimes not. You are setting the value of the textareas based on the values of the summernote fields. You can't be sure though, that $estado.summernote('code') is already finished before using the value of the summernote field to set the value of textfield4 (same holds for $goodat.summernote('code') and textfield5.
When you use callbacks for the summernote events, you can prevent this behaviour and have more control.
$('#estado').summernote({
callbacks: {
onChange: function(contents, $editable) {
console.log('onChange:', contents, $editable);
$("#textfield4").val(contents); //populate text area
}
}
});
Read more here
Another thing that could be causing trouble, is the foreach loop containing elements with hardcoded id's. Since id's have to be unique this can give some unexpected results. Of course, when $user matches $account->user only once, everything is fine, but I usually don't take the risk.
UPDATE: added a jsfiddle here of a possible implementation.

Bootstrap Collapse No Response

I'm currently making a list that creates categories based on user input through a text field. Each time the create button is clicked my JavaScript is called and adds a div that should be collapsible to show a list.
Right now I only have a button collapsing underneath but there will be additional content after I can get the collapse operational.
HTML: The JQuery UI is for potential drag-drop functionality later:
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.3.0.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!--
Bootstrap is a lightweight and relativley flexible framework that is great for responsive sites.
Although there are some downsides, as with almost anything, it is great for getting a good looking site up and running quickly.
This would allow this To Do List to be used just as easily on a mobile device while still maintaining an attractive look.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="h1 row text-center" id="main-header">To Do List</div>
<div class="row" id="category-anchor">
<div role="form" class="form-inline">
<label id="category-label">New Category: </label>
<input type="text" id="new-category" class="form-control">
<button id="create-category" class="btn btn-primary form-control" onClick="createCategory()">Create</button>
</div>
</div>
<li id="anchor">
</li>
</div>
</body>
<script src="todo.js"></script>
</html>
Here is my tiny bit of CSS:
* {
font-family: Serif;
}
#main-header {
font-weight: bold;
background-color: #00ffff;
margin-top: 0px;
}
#category-label {
font-size: 150%;
}
#create-category {
font-weight: bold;
font-family: Sans-serif;
font-size: 100%;
}
li {
list-style-type: none;
}
JavaScript:
var categoryID = 0;
var todoListID = 1000;
function createCategory() {
var newCategory = document.getElementById("new-category").value;
if(newCategory.trim().length != 0) {
var categoryRow = '<div id="' + categoryID + '" class="category">';
categoryRow += '<div class="h2 row text-center" data-toggle="collapse" data-target="#' + todoListID + '">' + newCategory + '</div>';
categoryRow += '</div>';
document.getElementById("new-category").value = "";
}
$(categoryRow).appendTo("#anchor");
addToDoList();
categoryID++;
todoListID++;
}
function addToDoList() {
var list = '<div id="' + todoListID + '" class="list collapse">';
list += '<div class="row">';
list += '<button class="btn btn-success create-list">New ToDo</button>';
list += '</div>';
list += '</div>';
$(list).appendTo("#" + categoryID);
}
If I use "collapse in" the button shows but the above div is still not collapsible.

Categories