We Keep Coding

How to remove the duplicate values in textbox

<script>
$("#filter").on("shown.bs.popover",function(){
$(".popover-content input[type=checkbox]").on("click",function(){
if(this.checked)
{
this.setAttribute("checked","checked");
}
else
{
this.removeAttribute("checked");
}
$("#customdiv").html($(".popover-content").html());
});
});
function fieldsFilter(flag,value,chkClass)
{
var checkedfields = new Array();
$('.'+chkClass).each(function()
{
if($(this).is(':checked'))
{
checkedfields.push($(this).val());
document.getElementById('scatFilters').value;
document.getElementById('ssrcFilters').value;
}
else
{
document.getElementById('scatfFilters').value='';
document.getElementById('ssrcfFilters').value = '';
}
});
$('#'+flag+'Filters').val(checkedfields);
}
</script>
<div id="content" class="content">
<div class="container">
<div class="email-btn-row hidden-xs inbox-actions" id="inbox-actions">
</i>
<div class='hide' id='customdiv'>
<div class="panel-group">
<button href="#" class="btn btn-link btn-sm" onclick="clearFilter()">Clear Filter</button>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
<i class="more-less glyphicon glyphicon-plus"></i>
Representatives
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<?php
foreach($rep_options as $rep_id => $rep_name){?>
<input type="checkbox" class="RepClicked" name="rep_<?=$rep_id?>" id="rep_<?=$rep_id?>" onchange="fieldsFilter('rps',this.value,'RepClicked');" value="<?=$rep_id?>" <? if(in_array($rep_id,$rep_name)) { echo "checked"; } ?>/>
<span style="font-size:12px;"><?=$rep_name?></span>
<br/>
<?php }?>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="true" aria-controls="collapse2">
<i class="more-less glyphicon glyphicon-plus"></i>
Status
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<?php
foreach($status_options as $status_id => $status){?>
<input type="checkbox" class="StatusClicked" name="status_<?=$status_id?>" id="status_<?=$status_id?>" onchange="fieldsFilter('sts',this.value,'StatusClicked');" value="<?=$status_id?>" <? if(in_array($status_id,$status)) { echo "checked"; } ?>/>
<span style="font-size:12px;"><?=$status?></span>
<br/>
<?php }?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="email-btn-row hidden-xs inbox-actions" id="inbox-actions" style="float:right">
<form id="allFilters" name="" class="" method="post" action="<?php echo base_url();?>missed_call_campaign/export">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
<input type="text" name="rpsFilters" class='hiddenFld' id="rpsFilters" value="<?=implode(',',$rep_id);?>" placeholder="rps"/>
<input type="text" name="stsFilters" class='hiddenFld' id="stsFilters" value="<?=implode(',',$status_id);?>" placeholder="sts"/>
</div>
</div>
</form>
</div>
</div>
</div>
If i check the checkbox in popover, the text box will hold the values double times, actually what i want is the textbox should taken the value single time. The above jquery script is used for hold the checked checkbox value when i close the popover. Because of the first jquery script, the value in the textbox is taken double times. sorry for my english. can any one please help me out of thisenter image description here

wrap your checkedfields.push($(this).val()) line inside a condition
like
if(checkedfields.indexOf($(this).val())==-1){
checkedfields.push($(this).val());
}

How to move up/down a single accordion html elements

I've got multiple accordions from Bootstrap 4. I want a single accordion to move up/down when I click its corresponding arrow. How do I go about this in JS or jQuery?
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h3 class="mb-0">
<a data-toggle="collapse" data-parent="#testchild" href="#section-1" aria-expanded="true" aria-controls="collapseOne">
Disco Full Overview
</a>
<a href="#">
<button class="btn btn-success pull-right">
<i class="mdi mdi-tooltip-edit"></i> Edit
</button>
</a>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-down" style="font-size: 21px"></i>
</button>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-up" style="font-size: 21px"></i>
</button>
</h3>
</div>
<div id="section-1" class="collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h3 class="mb-0">
<a data-toggle="collapse" data-parent="#testchild" href="#section-2" aria-expanded="true" aria-controls="collapseOne">
Disco Test
</a>
<a href="#">
<button class="btn btn-success pull-right">
<i class="mdi mdi-tooltip-edit"></i> Edit
</button>
</a>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-down" style="font-size: 21px"></i>
</button>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-up" style="font-size: 21px"></i>
</button>
</h3>
</div>
<div id="section-2" class="collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
...
</div>
</div>
</div>
I've already set up the arrow keys but I don't know how to do this.
Edit.
I've found about insertafter and insertbefore but I don't know how parent and child works. Because the up/down button is child to the other elements and I don't know how to address the entire accordion.

Bootstrap Accordion Expand/Collapse All not functioning properly

Here's the process to break this:
click Music Notation
click Expand/Collapse All
click Music Notation
click Expand/Collapse All
click Expand/Collapse All again
Notice how Music Notation will NOT open back up, even though, you should be able to see in the function, that the logic says that ALL panels are closed and should open. WHY? What am I doing wrong?
HTML:
<button class="btn btn-default btn-sm btn-exp" id="expandAllFormats">Expand/Collapse All</button>
<div class="panel-group checkbox-group" id="accordionFormat" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatText" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatText">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Text
</a>
</h4>
</div>
<div id="formatText" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">ALPHA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatArt" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatArt">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Art
</a>
</h4>
</div>
<div id="formatArt" class="panel-collapse collapse" aria-expanded="false" role="tabpanel">
<div class="panel-body">BETA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatAudio" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatAudio">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Audio
</a>
</h4>
</div>
<div id="formatAudio" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">GAMMA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatNotation" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatNotation">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Music Notation
</a>
</h4>
</div>
<div id="formatNotation" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">DELTA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatVideo" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatVideo">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Video
</a>
</h4>
</div>
<div id="formatVideo" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">EPSILON</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatInteractive" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatInteractive">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Digital Interactive
</a>
</h4>
</div>
<div id="formatInteractive" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">ZETA</div>
</div>
</div>
</div>
JS:
var toggleFormat = false;
$('#expandAllFormats').on('click', function(e) {
e.preventDefault();
console.log(toggleFormat);
$("#accordionFormat .panel-collapse").each(function(index, value){
if (toggleFormat){
if($(this).hasClass('in')){
$(this).collapse('toggle');
console.log("This panel is open. it will be closed");
} else {
console.log("This panel is closed. it will stay closed");
}
} else {
if(!$(this).hasClass('in')){
$(this).collapse('toggle');
console.log("This panel is closed. it will be open");
} else {
console.log("This panel is open. it will stay open");
}
}
});
toggleFormat = toggleFormat ? false : true;
});

The problem is that the state of all panels is different than the state of any single panel because of the way accordion works with data-parent. Your expand/collapse all button handler needs to completely override that normal accordion behavior.
The expand/collapse all click handler must keep track of the last state (expand all or collapse all), because the Bootstrap Collapse component is seperately handing the state of each single panel (only one open at a time). Otherwise, there would be no way to know whether to open or close the individually toggled panels.
$('#expandAllFormats').on('click', function () {
if ($(this).data("lastState") === null || $(this).data("lastState") === 0) {
// close all
$('.collapse.in').collapse('hide');
// next state will be open all
$(this).data("lastState",1);
$(this).text("Expand All");
}
else {
// initial state...
// override accordion behavior and open all
$('.panel-collapse').removeData('bs.collapse')
.collapse({parent:false, toggle:false})
.collapse('show')
.removeData('bs.collapse')
// restore single panel behavior
.collapse({parent:'#accordionFormat', toggle:false});
// next state will be close all
$(this).data("lastState",0);
$(this).text("Collapse All");
}
});
http://codeply.com/go/76Hl6s49rb
OFC, another way is to simply remove the data-parent= attributes and completely disable the accordion behavior.

If you can afford to remove the data-parent attribute data-parent="#accordionFormat" from all elements where it exists it will solve your issue.
Why? I'm not sure but it seems that attribute triggers some logic that messes up with the collapse functionality.
var toggleFormat = false;
$('#expandAllFormats').on('click', function (e) {
e.preventDefault();
console.log(toggleFormat);
$("#accordionFormat .panel-collapse").each(function (index, value) {
if (toggleFormat) {
if ($(this).hasClass('in')) {
$(this).collapse('toggle');
console.log("This panel is open. it will be closed");
} else {
console.log("This panel is closed. it will stay closed");
}
} else {
if (!$(this).hasClass('in')) {
$(this).collapse('toggle');
console.log("This panel is closed. it will be open");
} else {
console.log("This panel is open. it will stay open");
}
}
});
toggleFormat = toggleFormat ? false : true;
});
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-default btn-sm btn-exp" id="expandAllFormats">Expand/Collapse All</button>
<div class="panel-group checkbox-group" id="accordionFormat" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatText" role="button" data-toggle="collapse" href="#formatText">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Text
</a>
</h4>
</div>
<div id="formatText" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">ALPHA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatArt" class="collapsed" role="button" data-toggle="collapse" href="#formatArt">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Art
</a>
</h4>
</div>
<div id="formatArt" class="panel-collapse collapse" aria-expanded="false" role="tabpanel">
<div class="panel-body">BETA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatAudio" class="collapsed" role="button" data-toggle="collapse" href="#formatAudio">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Audio
</a>
</h4>
</div>
<div id="formatAudio" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">GAMMA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatNotation" class="collapsed" role="button" data-toggle="collapse"
href="#formatNotation">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Music Notation
</a>
</h4>
</div>
<div id="formatNotation" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">DELTA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatVideo" class="collapsed" role="button" data-toggle="collapse" href="#formatVideo">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Video
</a>
</h4>
</div>
<div id="formatVideo" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">EPSILON</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatInteractive" class="collapsed" role="button" data-toggle="collapse"
href="#formatInteractive">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Digital Interactive
</a>
</h4>
</div>
<div id="formatInteractive" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">ZETA</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

bootstrap accordion with two more/less link

I'm trying to create a collapsible panel with the possibility to click on two point to expand/collapse it, on the panel title and on the bottom right text.
What I did so far is this:
HTML:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Title Panel 1</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse in">
<div class="panel-body">
Contents panel 1
</div>
</div>
<div class="expandPanel">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Expand</a>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Title Panel 2</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 2
</div>
</div>
<div class="expandPanel">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Expand</a>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">Title Panel 3</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 3
</div>
</div>
<div class="expandPanel">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">Expand</a>
</div>
</div>
</div>
Javascript:
jQuery(function ($) {
var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
$active.find('a').append('<span class="glyphicon glyphicon-minus pull-right"></span>');
$('#accordion .panel-heading').not($active).find('a').prepend('<span class="glyphicon glyphicon-plus pull-right"></span>');
$('#accordion').on('show.bs.collapse', function (e)
{
$('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
$(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
});
$('#accordion').on('hide.bs.collapse', function (e)
{
$(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
});
});
http://jsfiddle.net/f908rx8v/1/
I'm stuck there.
I would like to move the plus/minus image from the panel title to the bottom right and the text "Expand" should follow the rule; show "Expand" when the panel isn't expanded and "Collapse" when it's expanded.
Thanks!

I placed the glyphicons initially inside .expandPanel a, so they will appear on the bottom right, and edited your JS a little to make them udpate as well as the text on the left side:
jQuery(function ($) {
$('.panel-collapse').on('hide.bs.collapse', function() {
var expandPanel = $(this).next('.expandPanel');
expandPanel
.find('.toggle-text').text('Expand');
expandPanel
.find('.glyphicon')
.removeClass('glyphicon-minus')
.addClass('glyphicon-plus');
});
$('.panel-collapse').on('show.bs.collapse', function() {
var expandPanel = $(this).next('.expandPanel');
expandPanel
.find('.toggle-text').text('Collapse');
expandPanel
.find('.glyphicon')
.removeClass('glyphicon-plus')
.addClass('glyphicon-minus');
});
});
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Title Panel 1</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse in">
<div class="panel-body">
Contents panel 1
</div>
</div>
<div class="expandPanel">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">
<span class="toggle-text">Collapse</span>
<span class="glyphicon glyphicon-minus pull-right"></span>
</a>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Title Panel 2</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 2
</div>
</div>
<div class="expandPanel">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">
<span class="toggle-text">Expand</span>
<span class="glyphicon glyphicon-plus pull-right"></span>
</a>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">Title Panel 3</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 3
</div>
</div>
<div class="expandPanel">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">
<span class="toggle-text">Expand</span>
<span class="glyphicon glyphicon-plus pull-right"></span>
</a>
</div>
</div>
</div>
Hope this helps!

data-parent="#accordion" not working

I have a scenario where i need to toggle when I click on specific topic and related question list should appear and I also want to closed when one of the collapsible item is shown for that I used accordion.
HTML:
<ul id="accordion">
<li ng-repeat="topics in oJdDetails.topics" class="topic-li" data-toggle="collapse" data-target="{{'#'+topics + $index}}" data-parent="#accordion" ng-click="fngetQList(topics,$index)">
<p class="topics-p"> {{topics}}</p>
<ul id="{{topics + $index}}" class="collapse topic-li">
<li ng-repeat="value in aQuestionList">{{value.quesList.quesListName}}</li>
</ul>
</li>
</ul>
JavaScript:
$scope.fngetQList = function(topics, index) {
debugger;
$scope.displayQList = true;
$scope.sTopics = topics;
$scope.index = index;
getCandidateInterviewListService.fnGetQList(topics).then(function(response) {
$scope.aQuestionList = response;
console.log($scope.aQuestionList);
});
};
Here topics are coming as response and I am making dynamic id for collapse
but here accordion is not working.
When I click on specific topic the order topic which are opened before are not closed and I don't understand the issue.
Any help would be appreciated.

I can't give example here in angular but you can use event "show.bs.collapse" which fire on clicking any accordion, on click you can close those accordion which has class .in and then your clicked accordion will opens. Please see Demo below:
$('#accordion .collapse').on('show.bs.collapse', function (e) {
alert("Open clicked accordian but hide others(already opened)");
$('#accordion .in').collapse('hide');
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-info">
<div class="panel-heading " role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#1" aria-expanded="true" aria-controls="collapseOne">
1
</a>
</h4>
</div>
<div id="1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Panel body data
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#2" aria-expanded="false" aria-controls="collapseTwo">
2
</a>
</h4>
</div>
<div id="2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Panel body data
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#3" aria-expanded="false" aria-controls="collapseThree">
3
</a>
</h4>
</div>
<div id="3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Panel body data
</div>
</div>
</div>
</div>
</div>