Jquery Append :checked Selector

Jquery Append :checked Selector - javascript

what I need to do is when I click in test1 checkbox show the div in show-content the div id item 1 :
<div class="show-content">
<div id="item1">
test1
</div>
when I click in test2 checkbox show the div in show-content the div id item 2 :
<div class="show-content">
<div id="item2">
test2
</div>
jsfiddle: http://jsfiddle.net/P3zMu/271/
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).parent('li').get(0);
if ($(this).is(':checked')) {
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$("span").bind("click", function() {
$(this).remove();
var selectedText = $(this).attr('selected-item');
selectedText = selectedText.split('_');
$('li#' + selectedText[0]).find('input').prop('checked', false);
});
});
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<h1> show the content </h1>
<div class="show-content">
<div id="item1">
test1
</div>
<div id="item2">
test2
</div>
</div>

First of all, you have multiple elements with the same id, and Id show never exists more than once. use class if needed.
$(".show-content [class^=item]").hide();
$('#selected_items span').each(function() {
var id = $(this).attr("selected-item").replace("_selected","");
$(".show-content ."+ id).show()
})
I've added the code above. Hope this is what your looking for.
Demo
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).parent('li').get(0);
if ($(this).is(':checked')) {
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$(".show-content [class^=item]").hide();
$('#selected_items span').each(function() {
var id = $(this).attr("selected-item").replace("_selected","");
$(".show-content ."+ id).show()
})
$("span").bind("click", function() {
$(this).remove();
var selectedText = $(this).attr('selected-item');
selectedText = selectedText.split('_');
$('li#' + selectedText[0]).find('input').prop('checked', false);
});
});
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<h1> show the content </h1>
<div class="show-content">
<div class="item1">
test1
</div>
<div class="item2">
test2
</div>
</div>

Your duplicating ID's, not ideal. But will still work in this case.
Below I'm initially setting the display:none on your sections.
And then just use toggle class on them, and finding the same id inside the show-content div.
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).parent('li').get(0);
var id = $(this).closest('[id]').attr('id');
$('.show-content #' + id).toggle($(this).is(':checked'));
if ($(this).is(':checked')) {
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$("span").bind("click", function() {
$(this).remove();
var selectedText = $(this).attr('selected-item');
selectedText = selectedText.split('_');
$('li#' + selectedText[0]).find('input').prop('checked', false);
});
});
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<h1> show the content </h1>
<div class="show-content">
<div id="item1" style="display:none">
test1
</div>
<div id="item2" style="display:none">
test2
</div>
</div>

Instead of multiple same id's you can use custom data attribute and then toggle those elements based on checkbox.
$('.show-content > div').hide();
$(".bill-type input[type='checkbox']").change(function() {
var id = $(this).parent('li').attr('id');
$('.show-content > div[data-target="' + id + '"]').toggle($(this).is(':checked'))
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<div class="show-content">
<div data-target="item1">test1</div>
<div data-target="item2">test2</div>
</div>

Try this
multiple same ids, not good one .so change with class name
HIDE all the show-content children before showing particular item
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).closest('li');
$('.show-content').find('div').hide();
if ($(this).is(':checked')) {
$('.show-content').find('div[class="'+$li.attr('id')+'"]').show()
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$("span").bind("click", function() {
$(this).remove();
var selectedText = $(this).attr('selected-item');
selectedText = selectedText.split('_');
$('li#' + selectedText[0]).find('input').prop('checked', false);
});
});
.test1 {
border: 1px solid red;
}
.show-content div{
display:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<div class="show-content">
<div class="item1">
test1
</div>
<div class="item2">
test2
</div>
</div>

One simple solution using data attributes and CSS:
$('[data-checked-toggle]').each(function(i) {
var thisCheckbox = $(this);
var thisTarget = $( thisCheckbox.data('checkedToggle') );
thisCheckbox.on('change', function(e) {
thisTarget.toggleClass('is-visible', thisCheckbox.is(':checked'));
}).trigger('change');
});
.show-content > div {
display: none;
}
.show-content > div.is-visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<label for="checkbox1">
<input id="checkbox1" type="checkbox" data-checked-toggle="#item1" /> test1
</label>
</p>
<p>
<label for="checkbox2">
<input id="checkbox2" type="checkbox" data-checked-toggle="#item2" /> test2
</label>
</p>
<div class="show-content">
<div id="item1">
test1
</div>
<div id="item2">
test2
</div>
</div>
Also on JSFiddle.
This way you have great control:
inside HTML you define which element is controlled by checkbox, anywhere on page
inside CSS you decide how to present the element, it does not have to be invisible - is easy when you add/remove class

Here is a sample code. i just added two id on checkbox.
<html>
<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.1.1/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" id="checkbox1" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" id="checkbox2" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<h1> show the content </h1>
<div class="show-content">
<div id="item1">
test1
</div>
<div id="item2">
test2
</div>
</div>
<script>
$(document).ready(function () {
$('#checkbox1').on('change', function () {
var checkbox1 = $('#checkbox1').is(':checked')
if (checkbox1) {
$(".show-content > #item1").hide();
} else {
$(".show-content > #item1").show();
}
});
$('#checkbox2').on('change', function () {
var checkbox2 = $('#checkbox2').is(':checked')
if (checkbox2) {
$(".show-content > #item2").hide();
} else {
$(".show-content > #item2").show();
}
});
})
</script>

Related

hide .card-body when childrens has "display:none"

I have two cards with collapse.
When the user clicks on a letter in the pagination I want the .card-body to adapt display:none if there are no divsto be shown in the card. Otherwise there is always some empty white space below the card-header.
the .card-body is the .parent() of $('#Categories > .acc-row')
For now I'm only able to either hide all card-bodies,none of them or just the first one.
Below is a snippet to my whole code. And here is a link to a fiddle
Here are snippets of what I've been working on for the last few hours ( none of the snippets works correctly).
var toHide = $('div.acc-row');
if(toHide.filter(':visible').length == 0){
$('.collapse').collapse("hide");
}
Another
if ($('#Categories > .acc-row').is(":visible")) {
$('#Categories > .acc-row').parent().show();
}else{
$('#Categories > .acc-row').parent().hide();
}
And another
$('#Categories > .acc-row').each(function(){
if ($(this).is(":visible")) {
$(this).parent().show();
}else{
$(this).parent().hide();
}
});
And here is my latest approach
if ($('#Categories > .acc-row:hidden')) {
$('#Categories > .acc-row').parent().show();
}else{
$('#Categories > .acc-row').parent().hide();
}
$(document).ready(function(){
$("#alphf .acco").each(function(){
$(this).on("click", function(){
$('.collapse').collapse("show");
var cat = $(this).data('cat-type');
var nam = $(this).data('cat-name');
if (cat != 0) {
$('#Categories > .acc-row').hide();
//$('#Categories > .acc-row:hidden').parent().hide();
$('#Categories > .acc-row[data-cat-type="'+cat+'"][data-cat-name="'+nam+'"]').show();
}
//var toHide = $('div.acc-row');
// if(toHide.filter(':visible').length == 0){
// $('.collapse').collapse("hide");
// }
// if ($('#Categories > .acc-row').is(":visible")) {
// $('#Categories > .acc-row').parent().show();
// }else{
// $('#Categories > .acc-row').parent().hide();
// }
// $('#Categories > .acc-row').each(function(){
// if ($(this).is(":visible")) {
// $(this).parent().show();
// }else{
// $(this).parent().hide();
// }
//
// });
if ($('#Categories > .acc-row:hidden')) {
$('#Categories > .acc-row').parent().show();
}else{
$('#Categories > .acc-row').parent().hide();
}
});
});
$("#search").on("keyup", function(e) {
//$('button').removeClass('collapsed');
$('#collapseOne, #collapseTwo').removeClass('collapse');
var value = $(this).val().toLowerCase();
$('.acc-row').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/accordion_css.css">
<script src="js/jquery_3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/popover.min.js"></script>
<script src="js/accordionFilter.js"></script>
<script src="js/scripts.js"></script>
<title>Accordion filter</title>
</head>
<body>
<div class="container">
<nav>
<ul class="pagination" id="alphf">
<!-- <li class="disabled"><span aria-hidden="true">«</span></li> -->
<li><a class="acco" href="#" data-cat-name="A" data-cat-type="A">A</a></li>
<li><a class="acco" href="#" data-cat-name="B" data-cat-type="B">B</a></li>
<li><a class="acco" href="#" data-cat-name="C" data-cat-type="C">C</a></li>
<li><a class="acco" href="#" data-cat-name="D" data-cat-type="D">D</a></li>
<li><a class="acco" href="#" data-cat-name="E" data-cat-type="E">E</a></li>
<li><a class="acco" href="#" data-cat-name="F" data-cat-type="F">F</a></li>
<li><a class="acco" href="#" data-cat-name="G" data-cat-type="G">G</a></li>
<li><a class="acco" href="#" data-cat-name="H" data-cat-type="H">H</a></li>
<li><a class="acco" href="#" data-cat-name="I" data-cat-type="I">I</a></li>
<li><a class="acco" href="#" data-cat-name="J" data-cat-type="J">J</a></li>
<li><a class="acco" href="#" data-cat-name="K" data-cat-type="K">K</a></li>
<li><a class="acco" href="#" data-cat-name="L" data-cat-type="L">L</a></li>
<li><a class="acco" href="#" data-cat-name="M" data-cat-type="M">M</a></li>
<li><a class="acco" href="#" data-cat-name="N" data-cat-type="N">N</a></li>
<li><a class="acco" href="#" data-cat-name="O" data-cat-type="O">O</a></li>
<li><a class="acco" href="#" data-cat-name="P" data-cat-type="P">P</a></li>
<li><a class="acco" href="#" data-cat-name="R" data-cat-type="R">R</a></li>
<li><a class="acco" href="#" data-cat-name="S" data-cat-type="S">S</a></li>
<li><a class="acco" href="#" data-cat-name="T" data-cat-type="T">T</a></li>
<li><a class="acco" href="#" data-cat-name="U" data-cat-type="U">U</a></li>
<li><a class="acco" href="#" data-cat-name="V" data-cat-type="V">V</a></li>
<li><a class="acco" href="#" data-cat-name="X" data-cat-type="X">X</a></li>
<li><a class="acco" href="#" data-cat-name="Y" data-cat-type="Y">Y</a></li>
<li><a class="acco" href="#" data-cat-name="Z" data-cat-type="Z">Z</a></li>
<!-- <li><span aria-hidden="true">»</span></li> -->
</ul>
</nav>
<div class="accordion accordian-wrapper" id="accordionStaff">
Search: <input id="search" type="text">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h5 class="accordian-title"> Department one </h5>
</button>
</h2>
</div>
<div id="name-cats">
<div id="collapseOne" class="collapse" aria-labelledby="headingOne">
<div class="card-body" id="Categories">
<div class="row acc-row" data-cat-type="A" data-cat-name="A">
<div class="col-md-3">
<p>Aston</p>
</div>
<div class="col-md-4">
<p>Tracker</p>
</div>
<div class="col-md-3">
<p>aston#some.com </p>
</div>
<div class="col-md-2">
<p>Phone:: 1234567890</p>
</div>
</div>
<div class="row acc-row" data-cat-type="A" data-cat-name="A">
<div class="col-md-3">
<p data-cat-type="A">Arleen</p>
</div>
<div class="col-md-4">
<p>Specialist</p>
</div>
<div class="col-md-3">
<p>arleen#firm.is</p>
</div>
<div class="col-md-2">
<p>phone 1239484999</p>
</div>
</div>
<div class="row acc-row" data-cat-type="J" data-cat-name="J">
<div class="col-md-3">
<p data-cat-type="J">John</p>
</div>
<div class="col-md-4">
<p>Registar</p>
</div>
<div class="col-md-3">
<p>jj#arn.com </p>
</div>
<div class="col-md-2">
<p> 1234565469</p>
</div>
</div>
<div class="row acc-row" data-cat-type="K" data-cat-name="K">
<div class="col-md-3">
<p data-cat-type="K">Kyle
</p>
</div>
<div class="col-md-4">
<p>Driver
</p>
</div>
<div class="col-md-3">
<p>kdrive#company.com
</p>
</div>
<div class="col-md-2">
<p> 1234567890
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<h5 class="accordian-title"> DepartmentTwo</h5>
</button>
</h2>
</div>
<div id="name-cats">
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
<div class="card-body" id="Categories">
<div class="row acc-row" data-cat-type="A" data-cat-name="A">
<div class="col-md-3">
<p id="staff_name" data-cat-type="A">Allan</p>
</div>
<div class="col-md-4">
<p>Specialist</p>
</div>
<div class="col-md-3">
<p>allan#lsome.com </p>
</div>
<div class="col-md-2">
<p>Phone: 1234567890</p>
</div>
</div>
<div class="row acc-row" data-cat-type="B" data-cat-name="B">
<div class="col-md-3">
<p id="staff_name" data-cat-type="B">Brad</p>
</div>
<div class="col-md-4">
<p>IT-Guy</p>
</div>
<div class="col-md-3">
<p>brad#some.com </p>
</div>
<div class="col-md-2">
<p> 1234567890 </p>
</div>
</div>
<div class="row acc-row" data-cat-type="B" data-cat-name="B">
<div class="col-md-3">
<p>Brent</p>
</div>
<div class="col-md-4">
<p>Specialist</p>
</div>
<div class="col-md-3">
<p>brent#some.com </p>
</div>
<div class="col-md-2">
<p>123456789</p>
</div>
</div>
<div class="row acc-row" data-cat-type="E" data-cat-name="E">
<div class="col-md-3">
<p>Evan</p>
</div>
<div class="col-md-4">
<p>Chef</p>
</div>
<div class="col-md-3">
<p>evan#some.com </p>
</div>
<div class="col-md-2">
<p>123456789</p>
</div>
</div>
</div>
</div>
</div><!-- Filter -->
</div>
</div>
</div><!--container -->
</body>
</html>

You can iterate over each card body to control whether each row is visible or not. Thus, it is possible to hide the card body if no div is visible.
The whole code:
$(document).ready(function() {
$("#alphf .acco").each(function() {
$(this).on("click", function() {
$('.collapse').collapse("show");
var cat = $(this).data('cat-type');
var nam = $(this).data('cat-name');
// modified from here down
if (cat != 0) {
$('.card-body').each(function(i, cardBody) {
var hidebody = true;
($(cardBody.children)).each(function(f, accRow) {
$(accRow).hide();
if ($(accRow).data('catType') == cat && $(accRow).data('catName') == nam) {
hidebody = false;
$(accRow).show();
}
});
if (hidebody) {
$(cardBody).hide();
} else {
$(cardBody).show();
}
});
}
// modified from here up
});
});
$("#search").on("keyup", function(e) {
$('#collapseOne, #collapseTwo').removeClass('collapse');
var value = $(this).val().toLowerCase();
$('.acc-row').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
In addition, you must not have more than one same id attribute on the same page. So I recommend you to remove or modify the id #Categories.

Change class after changing list

I have a dual list in which data is printing a ul li pattern from a JSON file. You can move any li to any side list. I am stuck at a point.
I want to enable a property that the <p> tag content only in <li> in right-list gets display: block and not the left-list side <li>. I have tried different JS code but they didn't work for me .
$('.content').hide();
$('.listelement').on('click', function() {
if (!($(this).children('.content').is(':visible'))) {
$('.content').slideUp();
$(this).children('.content').slideDown();
} else {
$('.content').slideUp();
}
});
$(function() {
$('body').on('click', '.show', function() {
css("display", "block");
});
$('body').on('click', '.list-group .list-group-item', function() {
$(this).toggleClass('active');
});
$('.listarrows button').click(function() {
var $button = $(this),
actives = '';
if ($button.hasClass('move-left')) {
actives = $('.list-right ul li.active');
actives.clone().appendTo('.list-left ul');
actives.remove();
} else if ($button.hasClass('move-right')) {
actives = $('.list-left ul li.active');
actives.clone().appendTo('.list-right ul');
actives.remove();
}
});
$('[name="SearchDualList"]').keyup(function(e) {
var code = e.keyCode || e.which;
if (code == '9') return;
if (code == '27') $(this).val(null);
var $rows = $(this).closest('.dual-list').find('.list-group li');
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
});
$(function() {
var ctList = [];
var ctRight = [];
var $tBody = $("#La");
var $rbody = $("#accordian");
$.getJSON('https://api.myjson.com/bins/d6n2a', function(data) {
data.topic_info.qt_ct_connection.map(value => {
value.ct_list.forEach(CTLIST => {
$tBody.append(`<li class="list-group-item" id="rl">${CTLIST.ct}<p style="display: none" class="show">
Simple collapsible
<div id="demo_${CTLIST.ct}" class="collapse">
${CTLIST.tts}, ${CTLIST.topic_level}, ${CTLIST.to_be_shown_individually}, ${CTLIST.check_for_geometry}
</div>
</p>
</li>`);
});
})
})
})
.ctList {
padding-top: 20px;
}
.ctList .dual-list .list-group {
margin-top: 8px;
}
.ctList .list-left li,
.list-right li {
cursor: pointer;
}
.ctList .list-arrows {
padding-top: 100px;
}
.ctList .list-arrows button {
margin-bottom: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="ctList">
<div class="container">
<div class="row">
<div class="dual-list list-left col-md-5">
<div class="well text-right">
<div class="row">
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search">
<i class="fa fa-search" aria-hidden="true" style="padding-right: 20px;"></i>
</span>
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
</div>
</div>
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all">
<i class="glyphicon glyphicon-unchecked"></i>
</a>
</div>
</div>
</div>
<ul class="list-group" id="La"></ul>
</div>
</div>
<div class="list-arrows col-md-1 text-center">
<button class="btn btn-default btn-sm move-left">
<span class="glyphicon glyphicon-chevron-left">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
</span>
</button>
<button class="btn btn-default btn-sm move-right">
<span class="glyphicon glyphicon-chevron-right">
<i class="fa fa-arrow-right" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dual-list list-right col-md-5">
<div class="well">
<div class="row">
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all">
<i class="glyphicon glyphicon-unchecked"></i>
</a>
</div>
</div>
<div class="col-md-10">
<div class="input-group">
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<form>
<ul class="list-group" id="accordian">
<!-- right list -->
</ul>
<input type="submit" value="submit" name="submit">
</form>
</div>
</div>
</div>
</div>
</section>

Add CSS and remove inline style display none from p tag in JS.
$('.content').hide();
$('.listelement').on('click', function() {
if (!($(this).children('.content').is(':visible'))) {
$('.content').slideUp();
$(this).children('.content').slideDown();
} else {
$('.content').slideUp();
}
});
$(function() {
$('body').on('click', '.show', function() {
css("display", "block");
});
$('body').on('click', '.list-group .list-group-item', function() {
$(this).toggleClass('active');
});
$('.listarrows button').click(function() {
var $button = $(this),
actives = '';
if ($button.hasClass('move-left')) {
actives = $('.list-right ul li.active');
actives.clone().appendTo('.list-left ul');
actives.remove();
} else if ($button.hasClass('move-right')) {
actives = $('.list-left ul li.active');
actives.clone().appendTo('.list-right ul');
actives.remove();
}
});
$('[name="SearchDualList"]').keyup(function(e) {
var code = e.keyCode || e.which;
if (code == '9') return;
if (code == '27') $(this).val(null);
var $rows = $(this).closest('.dual-list').find('.list-group li');
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
});
$(function() {
var ctList = [];
var ctRight = [];
var $tBody = $("#La");
var $rbody = $("#accordian");
$.getJSON('https://api.myjson.com/bins/d6n2a', function(data) {
data.topic_info.qt_ct_connection.map(value => {
value.ct_list.forEach(CTLIST => {
$tBody.append(`<li class="list-group-item" id="rl">${CTLIST.ct}<p>
Simple collapsible
<div id="demo_${CTLIST.ct}" class="collapse">
${CTLIST.tts}, ${CTLIST.topic_level}, ${CTLIST.to_be_shown_individually}, ${CTLIST.check_for_geometry}
</div>
</p>
</li>`);
});
})
})
})
.ctList {
padding-top: 20px;
}
.ctList .dual-list .list-group {
margin-top: 8px;
}
.ctList .list-left li,
.list-right li {
cursor: pointer;
}
.ctList .list-arrows {
padding-top: 100px;
}
.ctList .list-arrows button {
margin-bottom: 20px;
}
/********************************/
/********************************/
/********************************/
/* ADD THIS */
.dual-list.list-left .well li.list-group-item p {
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="ctList">
<div class="container">
<div class="row">
<div class="dual-list list-left col-6">
<div class="well text-right">
<div class="row">
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search">
<i class="fa fa-search" aria-hidden="true" style="padding-right: 20px;"></i>
</span>
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
</div>
</div>
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all">
<i class="glyphicon glyphicon-unchecked"></i>
</a>
</div>
</div>
</div>
<ul class="list-group" id="La"></ul>
</div>
</div>
<div class="dual-list list-right col-6">
<div class="well">
<div class="row">
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all">
<i class="glyphicon glyphicon-unchecked"></i>
</a>
</div>
</div>
<div class="col-md-10">
<div class="input-group">
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<ul class="list-group" id="La">
<li class="list-group-item" id="rl">point_in_first_quad
<p>
Simple collapsible
</p>
<div id="demo_point_in_first_quad" class="collapse">
10, capable, true, true
</div>
<p></p>
</li>
<li class="list-group-item" id="rl">point_in_second_quad
<p>
Simple collapsible
</p>
<div id="demo_point_in_second_quad" class="collapse">
10, capable, true, true
</div>
<p></p>
</li>
<li class="list-group-item" id="rl">trapezium_draw_slope_area_equ
<p>
Simple collapsible
</p>
<div id="demo_trapezium_draw_slope_area_equ" class="collapse">
20, strong, true, true
</div>
<p></p>
</li>
</ul>
<form>
<ul class="list-group" id="accordian">
<!-- right list -->
</ul>
<input type="submit" value="submit" name="submit">
</form>
</div>
</div>
</div>
</div>
</section>

how to add and remove attributes click event in jquery?

function myFunction(e) {
var currentTab = $(e).data("target");
$(currentTab).is(':visible') && $(currentTab).hide('slow') || $(currentTab).show('slow').siblings().hide('slow');
if ($(currentTab).is(":hidden")){
$(currentTab).children('input').attr("name", 'filterMode');
$(currentTab).children('input').attr('value', currentTab);
$(currentTab).children('div').children('input:first').attr("name", 'filterBegin');
$(currentTab).children('div').children('input:last').attr("name", 'filterEnd');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-primary searchPanel">
<ul class="nav nav-list panel-tabs filterButtons">
<li>
<button class="btn btn-arya btn-primary" type="button" data-target="#kararNo" data-toggle="tab"
onclick="myFunction(this)">Karar No İle
</button>
</li>
</ul>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane" id="kararNo">
<input type="hidden" class="form-control filterInputs" id="searchInput0" placeholder="Karar No">
<div class="input col-sm-5">
<input type="text" class="form-control filterInputs" id="searchInput1" placeholder="Karar No">
</div>
</div>
</div>
</div>
</div>
This inputs open in first click, second click closes.
I want to delete when I close the added attributes when I open. can you help me please ?

function myFunction(e) {
var currentTab = $(e).data("target");
var filters = ['filterMode', 'filterBegin','filterEnd'];
if($(currentTab).is(':visible')){
$(currentTab).children('input').removeAttr('value');
$(currentTab).find('input').map(function(index,input){
$(input).removeAttr("name");
});
$(currentTab).siblings().find('input').map(function(index,input){
$(input).removeAttr("name");
});
$(currentTab).hide('slow');
}else{
$(currentTab).children('input').attr('value', currentTab);
$(currentTab).find('input').map(function(index,input){
$(input).attr("name", filters[index]);
});
$(currentTab).siblings().find('input').map(function(index,input){
$(input).removeAttr("name");
});
$(currentTab).show('slow').siblings().hide('slow');
}
}
solution of my question, that's it. Thank's a lot

function myFunction(e) {
var currentTab = $(e).data("target");
// check element visible
if($('#kararNo:visible').length == 0){
console.log("visible");
}else{
console.log("hidden");
}
//end element visiblity check
$(currentTab).is(':visible') && $(currentTab).hide('slow') || $(currentTab).show('slow').siblings().hide('slow');
if ($(currentTab).is(":hidden")){
console.log("hidden");
$(currentTab).children('input').attr("name", 'filterMode');
$(currentTab).children('input').attr('value', currentTab);
$(currentTab).children('div').children('input:first').attr("name", 'filterBegin');
$(currentTab).children('div').children('input:last').attr("name", 'filterEnd');
}
}
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
alert(target);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-primary searchPanel">
<ul class="nav nav-list panel-tabs filterButtons">
<li>
<button class="btn btn-arya btn-primary" type="button" data-target="#kararNo" data-toggle="tab"
onclick="myFunction(this)">Karar No İle
</button>
</li>
</ul>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane" id="kararNo">
<input type="hidden" class="form-control filterInputs" id="searchInput0" placeholder="Karar No">
<div class="input col-sm-5">
<input type="text" class="form-control filterInputs" id="searchInput1" placeholder="Karar No">
</div>
</div>
</div>
</div>
</div>
Just use your known id to check the visibility as follows.
if($('#kararNo:visible').length == 0){
console.log("visible");
}else{
console.log("hidden");
}

jQuery click remove

my code is including the label text in a span tag, what I am trying to do is: remove the span tag when I click in each span.
sample I added test1 and test2, so in Refined by: if I click in each label test1 remove that label test1 or if I click in test2 remove the label test2.
someone can help me with that, I am not understanding what I am doing wrong.
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).parent('li').get(0);
if ($(this).is(':checked')) {
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$("span").bind("click", function() {
alert("The quick brown fox jumps over the lazy dog.");
$(span).remove();
});
});
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>

You can do like this:
$('#selected_items').on('click', '.label-primary', function(){
$(this).remove();
});

var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).parent('li').get(0);
if ($(this).is(':checked')) {
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$("span").bind("click", function() {
alert("The quick brown fox jumps over the lazy dog.");
$(this).remove();
var selectedText = $(this).attr('selected-item');
selectedText = selectedText.split('_');
$('li#' + selectedText[0]).find('input').prop('checked', false);
});
});
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>

You need to added click event for particular spam element:
//Assign click to current checked input sibling span
$(this).parent().find("span").bind("click", function() {
alert("The quick brown fox jumps over the lazy dog.");
//Remove current li clicked span with this
$(this).parent().remove();
});
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).parent('li').get(0);
if ($(this).is(':checked')) {
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$(this).parent().find("span").bind("click", function() {
alert("The quick brown fox jumps over the lazy dog.");
$(this).parent().remove();
});
});
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>

jquery ready event is not working when bootstrap modal is called

I have created a jquery menu as I have links in my li, which is generated by a framework and can not have control over it.
I have created the snippet for my code. It works fine on document load. No issues.
I have another bootstrap button for sign in and sign up.
As i click on button it breaks my menu which created with jQuery and show all links without nesting. It seems like it calls another event and it breaks it.
It will be great help if some one help to tackle this sort of issue.
Thanks.
V
$(document).ready(function(){
$.fn.chunk = function(size) {
var arr = [];
for (var i = 0; i < this.length; i += size) {
arr.push(this.slice(i, i + size));
}
return this.pushStack(arr, "chunk", size);
}
var listItems = $("ul.nav li div");
listItems.each(function() {
var contentIds = $(this).attr("id");
if(contentIds != 'homeLink' &&
contentIds != 'jobBoardLink' &&
contentIds != 'contentLink10000001' &&
contentIds != 'contentLink20000002' &&
contentIds != 'contentLink30000003' &&
contentIds != 'contentLink40000004'){
$(this).parent().appendTo('#contentLink10000001');
if(contentIds.indexOf('contentLink2') !== -1){
$(this).parent().appendTo('#contentLink20000002');
}
if(contentIds.indexOf('contentLink3') !== -1){
$(this).parent().appendTo('#contentLink30000003');
}
if(contentIds.indexOf('contentLink4') !== -1){
$(this).parent().appendTo('#contentLink40000004');
}
}
});
$('#contentLink10000001 > a,#contentLink20000002 > a,#contentLink30000003 > a,#contentLink40000004 > a').removeAttr('href');
var liCount = $('#contentLink10000001 li,#contentLink20000002 li,#contentLink30000003 li,#contentLink40000004 li').length;
$("#contentLink10000001 li").chunk(liCount).wrap('<ul class="subContent"></ul>');
$("#contentLink20000002 li").chunk(liCount).wrap('<ul class="subContent"></ul>');
$("#contentLink30000003 li").chunk(liCount).wrap('<ul class="subContent"></ul>');
$("#contentLink40000004 li").chunk(liCount).wrap('<ul class="subContent"></ul>');
});
.navbar-nav> li{
float: left;
position:relative;
}
.navbar-nav> li:hover{
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<div class="container">
<center>
<button class="btn btn-primary btn-lg" href="#signup" data-toggle="modal" data-target=".bs-modal-sm">Sign In/Register</button>
</center>
</div>
<!-- Modal -->
<div class="modal fade bs-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<br>
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active">Sign In</li>
<li class="">Register</li>
<li class="">Why?</li>
</ul>
</div>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="why">
<p>We need this information so that you can receive access to the site and its content. Rest assured your information will not be sold, traded, or given to anyone.</p>
<p></p><br> Please contact <a mailto:href="JoeSixPack#Sixpacksrus.com"></a>JoeSixPack#Sixpacksrus.com</a> for any other inquiries.</p>
</div>
<div class="tab-pane fade active in" id="signin">
<form class="form-horizontal">
<fieldset>
<!-- Sign In Form -->
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="userid">Alias:</label>
<div class="controls">
<input required="" id="userid" name="userid" type="text" class="form-control" placeholder="JoeSixpack" class="input-medium" required="">
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="passwordinput">Password:</label>
<div class="controls">
<input required="" id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********" class="input-medium">
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="control-group">
<label class="control-label" for="rememberme"></label>
<div class="controls">
<label class="checkbox inline" for="rememberme-0">
<input type="checkbox" name="rememberme" id="rememberme-0" value="Remember me">
Remember me
</label>
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<button id="signin" name="signin" class="btn btn-success">Sign In</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</center>
</div>
</div>
</div>
</div>
<ul class="nav navbar-nav">
<li>
<div class="link" id="contentLink10000001"><ins> </ins>Parent Link 1</div>
</li>
<li>
<div class="link" id="contentLink20000002"><ins> </ins>Parent Link 2</div>
</li>
<li>
<div class="link" id="contentLink1000006"><ins> </ins>Child Link 1</div>
</li>
<li>
<div class="link" id="contentLink1000002"><ins> </ins>Child Link 2</div>
</li>
<li>
<div class="link" id="contentLink1000003"><ins> </ins>Child Link 3</div>
</li>
<li>
<div class="link" id="contentLink1000004"><ins> </ins>Child Link 4</div>
</li>
</li>
<li>
<div class="link" id="contentLink2000014"><ins> </ins>Child Link 5</div>
</li>
<li>
<div class="link" id="contentLink2000015"><ins> </ins>Child Link 6</div>
</li>
<li>
<div class="link" id="contentLink2000016"><ins> </ins>Child Link 7</div>
</li>
<li>
<div class="link" id="contentLink30000003"><ins> </ins>Parent Link 3 </div>
</li>
<li>
<div class="link" id="contentLink3000001"><ins> </ins>Child Link 8</div>
</li>
<li>
<div class="link" id="contentLink40000004"><ins> </ins>Parent Link 4 </div>
</li>
<li>
<div class="link" id="contentLink4000001"><ins> </ins>Child Link 9</div>
</li>
</ul>

document.ready is called when the DOM is loaded, not when the modal is opened.
You want to bind to the modal open event.
$('#modal-content').on('shown.bs.modal', function() {
$("#txtname").focus();
})

I have got my code working by adding this function to my jQuery
$(document).ready(function(){
$.fn.chunk = function(size) {
var arr = [];
for (var i = 0; i < this.length; i += size) {
arr.push(this.slice(i, i + size));
}
return this.pushStack(arr, "chunk", size);
}
buildNavMenus();
$( document ).ajaxComplete(function() {
buildNavMenus();
});
});
in buildNavMenus(); I have added my code to create nested menu.

Develop Reference

JavaScript is the programming language of the Web.

Jquery Append :checked Selector - javascript

Related

hide .card-body when childrens has "display:none"

Change class after changing list

how to add and remove attributes click event in jquery?

jQuery click remove

jquery ready event is not working when bootstrap modal is called

Categories

Resources