I am a Javascript beginner (this is my first javascript program) and I have a few problems with my mini app...
I am trying to build a page that allows you to choose who was in your team working with you today. The user should be able to build his own list among a list of names.
When the user clicks on "Add to the team", it should remove the corresponding <li> and add it to the selected list below.
The button needs to change from Add to the team to Delete
I am struggling to change the button textcontent if user choose to add then remove then add the same <li>...
I've been trying a lot of things, this is my last try:
'script type="text/javascript"';
var selected = document.querySelector('#selected-list ul');
var team = document.querySelector('#team-list ul');
var searchBar = document.forms['search-employees'].querySelector('input');
//add to the selected team
team.addEventListener("click", function(e){
if(e.target.className == 'add'){
const li = document.createElement('li');
const employeename = document.createElement('span');
const deleteBtn = document.createElement('span');
//add content
deleteBtn.textContent = 'add';
employeename.textContent = e.target.parentElement.firstElementChild.textContent;
//add classes
employeename.classList.add("name");
deleteBtn.classList.add('delete');
// append to document
li.appendChild(employeename);
li.appendChild(deleteBtn);
selected.appendChild(li);
console.log(deleteBtn);
}
})
//delete teammate from selected team
selected.addEventListener('click', function(e){
if(e.target.className == 'delete'){
const li = document.createElement('li');
const employeename = document.createElement('span');
const addBtn = document.createElement('span');
//add content
addBtn.textContent = 'delete';
employeename.textContent = e.target.parentElement.firstElementChild.textContent;
//add classes
employeename.classList.add("name");
addBtn.classList.add('add');
// append to document
li.appendChild(employeename);
li.appendChild(addBtn);
team.appendChild(li);
//delete from selected
console.log(addBtn);
}
})
//add a new employee - listen to submit event from form
var addForm = document.forms['add-employee'];
addForm.addEventListener('submit', function(e){
e.preventDefault(); //prevent default behavior
const value = addForm.querySelector('input[type="text"]').value;
console.log(value);
//create elements
const li = document.createElement('li');
const employeename = document.createElement('span');
const deleteBtn = document.createElement('span');
//add content
deleteBtn.textContent = 'delete';
employeename.textContent = value;
//add classes
employeename.classList.add("name");
deleteBtn.classList.add('delete');
// append to document
li.appendChild(employeename);
li.appendChild(deleteBtn);
selected.appendChild(li);
//apply style
})
//filter names
//grab a reference to the form
searchBar.addEventListener('keyup', function(e){
//term the user is searching
const term = e.target.value.toLowerCase();
//names to compare
const names = team.getElementsByTagName('li');
Array.from(names).forEach(function(name){
const fullname = team.firstElementChild.textContent;
//check if name exists
if(fullname.toLowerCase().indexOf(term) != -1){
name.style.display = 'block';
} else {
name.style.display = 'none';
}
})
})
It gives me the following result:
Every time I hit the button, it gives me a duplicate (same for the input Teammate not found)
Moreover, I still can't, once deleted, get back to a "Add to the team"...
I hope you guys can enlighten me, I spent maybe too much time on it, but I cant find out right now...
This is few captions of what it does:
enter image description here
once you clicked on delete in selected list
enter image description here
Thank you
HTML:
<?php
require_once 'core/init.php';
include 'includes/checkedboxes.php';
include 'includes/headerfront.php';
//include_once 'includes/dbh.inc.php';
if(Session::exists('Success')){
echo Session::flash('Success');
}
?>
<html>
<head>
<link rel="stylesheet" href="styleChief.css">
</head>
<body>
<section class="team">
<div id="wrapper">
<div id="container-left">
<div id="search">
<h2 class="title">Who was in your team today?</h1>
<form id="search-employees">
<input type="text" name="search" placeholder="Search a name..">
</form>
</div>
<div id="team-list">
<h3 class="title">Team list</h3>
<p>Select today's teammates</p>
<ul>
<li>
<span class="name">name</span>
<span class="add">Add to the team</span>
</li>
<li>
<span class="name">name 1</span>
<span class="add">Add to the team</span>
</li>
<li>
<span class="name">name 2</span>
<span class="add">Add to the team</span>
</li>
<li>
<span class="name">name 3</span>
<span class="add">Add to the team</span>
</li>
</ul>
</div>
<div id=newmember class="newmember">
<h4>
<a class="not-found" href="#"><img class="img" src="img/not-found.png" width="20" height="20" alt="not-found">
</a>Teammate not found?</h4>
<form id="add-employee">
<h3 class="title">Add a new member:</h3>
<input type="text" placeholder="New teammate name">
<button>Add</button>
</form>
</div>
</div>
<div id="container-right">
<h2>Selected</h2>
<div id="selected-list">
<h3 class="title">You have selected the following teammates for today: </h3>
<ul>
</ul>
</div>
</div>
</div>
</section>
<section class="part">
<h2>Which part(s) have you been working on today?</h2>
<input type="checkbox" name="checklist-part" value="Decoratives"><label>Decoratives</label>
<input type="checkbox" name="checklist-part" value="Windows"><label>Windows</label>
<input type="checkbox" name="checklist-part" value="Signage Gibela"><label>Signage Gibela</label>
<input type="checkbox" name="checklist-part" value="Signage Prasa"><label>Signage Prasa</label>
<input type="checkbox" name="checklist-part" value="Stripes"><label>Stripes</label>
<input type="checkbox" name="checklist-part" value="Other"><label>Other</label><br/>
<input type="submit" name="submit" value="Continue" /><br/>
</form>
</section>
<?php
$sql="SELECT * FROM dttechnames;";
$result=mysqli_query($conn,$sql);
?>
<script src="app/app.js"></script>
<script src="app/app.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>
I tried to fx a few issues with your snippet (e. g. there was a <form> tag missing). Basically, you were working far too hard in your script part. If you want to move a <li> from one <ul> to another then it is easiest to simply .appendChild() it to the target <ul>. Doing so will automatically remove it from its original parent <ul>. As the "move" operation is universal to all team-member-<li>s - whether they are part of the "team" or the "selected" group - we can use a single "click" event-listener for all of them. I added it to the outer #wrapper div.
The following snippet only covers the team member picking part (I removed all other script components for clarity) but it should demonstrate the basic points:
var grps=['#selected','#team'].map(s=>document.querySelector(s+'-list ul')),
btn=['Add to the team','Remove from the team'];
[...grps[1].querySelectorAll('.move')].forEach(sp=>sp.textContent=btn[0])
// move members ...
document.querySelector('#wrapper').addEventListener("click", function(e){
if(e.target.classList.contains('move')){
var i=btn.indexOf(e.target.textContent); // i=0 (Adding) or i=1 (Removing) ?
e.target.textContent=btn[1-i]; // exchange button caption
grps[i].appendChild(e.target.parentNode) // move team member ...
}
})
li {margin: 10px}
.move{
float: right;
background: #9361bf;
padding:4px;
border-radius: 3px;
}
<section class="team">
<div id="wrapper">
<div id="container-left">
<div id="search">
<h2 class="title">Who was in your team today?</h1>
<form id="search-employees">
<input type="text" name="search" placeholder="Search a name..">
</form>
</div>
<div id="team-list">
<h3 class="title">Team list</h3>
<p>Select today's teammates</p>
<ul>
<li>
<span class="name">Roman BARON</span>
<span class="move"></span>
</li>
<li>
<span class="name">Vincent Houdeville</span>
<span class="move"></span>
</li>
<li>
<span class="name">Jayson Abrams</span>
<span class="move"></span>
</li>
<li>
<span class="name">Bafana Hlongwane</span>
<span class="move"></span>
</li>
</ul>
</div>
<div id=newmember class="newmember">
<h4>
<a class="not-found" href="#"><img class="img" src="img/not-found.png" width="20" height="20" alt="not-found">
</a>Teammate not found?</h4>
<form id="add-employee">
<h3 class="title">Add a new member:</h3>
<input type="text" placeholder="New teammate name">
<button>Add</button>
</form>
</div>
</div>
<div id="container-right">
<h2>Selected</h2>
<div id="selected-list">
<h3 class="title">You have selected the following teammates for today: </h3>
<ul>
</ul>
</div>
</div>
</div>
</section>
<section class="part">
<h2>Which part(s) have you been working on today?</h2>
<form id="parts">
<label><input type="checkbox" name="checklist-part" value="Decoratives">Decoratives</label>
<label><input type="checkbox" name="checklist-part" value="Windows">Windows</label>
<label><input type="checkbox" name="checklist-part" value="Signage Gibela">Signage Gibela</label>
<label><input type="checkbox" name="checklist-part" value="Signage Prasa">Signage Prasa</label>
<label><input type="checkbox" name="checklist-part" value="Stripes">Stripes</label>
<label><input type="checkbox" name="checklist-part" value="Other">Other</label><br/>
<input type="submit" name="submit" value="Continue" /><br/>
</form>
</section>
This seems to have been the first question you posted on StackOverflow, so a belated: "Welcome here!"
But I would like to point out that your question was unnecessarily long and complicated. You should try and focus on one point per question. This would make it much more accessible for other Stackoverflow members to answer without having to review large chunks of code first.
And one final remark: You tagged your question with jQuery, but as you haven't used it in your script I also removed the script src="...jquery..."></script> tag from my snippet. I am eternally grateful to John Resig for giving us jQuery but in modern browsers you can now mostly do without it.
After trying cars10m solution, I have few problems..
1. The css style of my "Add to the team" disappeared. I of course changed my code above to:
.add,.delete {
float: right;
background: #9361bf;
padding:6px;
border-radius: 4px;
}
to :
.move{
float: right;
background: #9361bf;
padding:6px;
border-radius: 4px;
}
but doesnt style the class.
Maybe move is a reserved keyword?
Anyways, I have another problem:
2. That solution moves the selected "li", but inside the same <ul>.
When I do a console.log(e.target.textContent) just after if(e.target.classList.contains('move')), i get to see that it contains "Add to the team" and "Remove from the team".
I found out that it was behaving as if I clicked two twice, but I only clicked once.
Why?
Thank you guys for your answers!!
Related
I have radio button
Html code:
<input type="radio" class="first" name="bright" checked>
<input type="radio" class="second" name="bright" >
<input type="radio" class="third" name="bright">
<input type="radio" class="four" name="bright">
And i have a nav bar
Html code
<ul class="nav">
<li class="st st1 active" data-cont="first">
<h2 class="inner">وزارة الاستثمار</h2>
</li>
<li class="st st2" data-cont="second">
<h2 class="inner">وزارة التجارة</h2>
</li>
<li class="st st3" data-cont="third">
<h2 class="inner">جهات حكومية اخرى</h2>
</li>
<li class="st st4" data-cont="four">
<h2 class="inner">مكتب هندسي</h2>
</li>
</ul>
These 2 are conected with the data-cont that have the class of the radio button
I want when i click on the li the correct radio button be checked using javascript
I tried to make it using this code in JavaScript
let radio = document.querySelectorAll("input");
let radioArray = Array.from(radio);
let tabs = document.querySelectorAll(".nav li");
let tabsArray = Array.from(tabs);
tabsArray.forEach((ele) => {
ele.addEventListener("click", function (e) {
tabsArray.forEach((ele) => {
ele.classList.remove("active");
});
e.currentTarget.classList.add("active");
document.querySelector(e.currentTarget.dataset.cont).checked = true;
});
});
I try to remove the active class from li and put it on the li where i click then i want the radio button be checked
Any body can help me on this?
the last querySelector is where your code is failing you're not referencing the class for your input it needs to be document.querySelector('.' + e.currentTarget.dataset.cont).checked = true; note the "." prefix
Although that answers your question there is probably more value in pointing out that by changing your html markup to be a little more accessible you can eliminate the need for all of the javascript in your example
e.g.
input:checked + label {
color:Red;
}
<div><input type="radio" id="first" name="bright" checked>
<label for='first'>وزارة الاستثما</label>
</div>
<div>
<input type="radio" id="second" name="bright" >
<label for='second'>وزارة التجارة</label>
</div>
<div>
<input type="radio" id="third" name="bright">
<label for='third'>جهات حكومية اخرى</label>
</div>
<div>
<input type="radio" id="four" name="bright">
<label for='four'>مكتب هندسي</label>
</div>
The use of labels associated with your radio buttons is now significantly more accessible and you can drastically reduce a lot of your markup ( though to be accessible you would need to provide a more meaningful name for for attribute.
I am building a simple shop website (just to practise) and even though my current solution works, from what I read it is not optimal and could be improved through creating event listener on the parent element (here it would be cart-items instead of on every anchor element. The problem is that when I attach event handler to it, then only the first input is changed if there are two or more elements in the basket, no matter which increase button I click (the one from product one, two, ect.).
My question is: in such case is attaching event listener to the parent element really the best option, and if yes, how can I properly refactor my code to make increase/decrease button work on their closest input value, not only on the first one from the rendered list?
Below I attach my current JS Code:
const qtyBoxes = document.querySelectorAll('.cart-qty-box');
qtyBoxes.forEach((box) => {
const increase = box.querySelector('.increase');
const decrease = box.querySelector('.decrease');
const currQty = box.querySelector('.currQty');
increase.addEventListener('click', function(e) {
e.preventDefault();
currQty.value++;
$('#przelicz').click(); //uptades UI
});
decrease.addEventListener('click', function(e) {
e.preventDefault();
if(currQty.value > 0) {
currQty.value--;
}
$('#przelicz').click(); //updates UI
});
});
HTML:
<div class="cart-items">
///... Item 1 code ...
<div class="qty-box">
<div class="qty-ctl">
<a class="incr-btn decrease" data-action="decrease" href="#"></a>
</div>
<input id="qnt" class="qty currQty input-text" type="text" value="{$poz->count}"/>
<div class="qty-ctl">
<a class="incr-btn increase" data-action="increase" href="#"></a>
</div>
</div>
///... Item 2 code ...
<div class="qty-box">
<div class="qty-ctl">
<a class="incr-btn decrease" data-action="decrease" href="#"></a>
</div>
<input id="qnt" class="qty currQty input-text" type="text" value="{$poz->count}"/>
<div class="qty-ctl">
<a class="incr-btn increase" data-action="increase" href="#"></a>
</div>
</div>
</div>
Here I paste a link to the image if the description of what I am trying to build is not clear:
screenshot of basket
Yes, it is better to attach the event listener to the parent, because you have only one listener instead of multiple listeners (one for every button).
You can achieve this by checking to which box the target of the click-event (e.target) belongs:
const click_parent = e.target.closest('.qty-box');
and if it's an increase- or decrease-button, for example:
if (e.target.classList.contains('increase')) {
The rest works like in your snippet.
Working example:
document.querySelector('.cart-items').addEventListener('click', function(e) {
e.preventDefault();
const click_parent = e.target.closest('.qty-box');
const currQty = click_parent.querySelector('.currQty');
if (e.target.classList.contains('increase')) {
currQty.value++;
$('#przelicz').click(); //uptades UI
} else if (e.target.classList.contains('decrease')) {
if (currQty.value > 0) {
currQty.value--;
}
$('#przelicz').click(); //uptades UI
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cart-items">
///... Item 1 code ...
<div class="qty-box">
<div class="qty-ctl">
<a class="incr-btn decrease" data-action="decrease" href="#">decrease</a>
</div>
<input id="qnt" class="qty currQty input-text" type="text" value="2" />
<div class="qty-ctl">
<a class="incr-btn increase" data-action="increase" href="#">increase</a>
</div>
</div>
///... Item 2 code ...
<div class="qty-box">
<div class="qty-ctl">
<a class="incr-btn decrease" data-action="decrease" href="#">decrease</a>
</div>
<input id="qnt" class="qty currQty input-text" type="text" value="3" />
<div class="qty-ctl">
<a class="incr-btn increase" data-action="increase" href="#">increase</a>
</div>
</div>
</div>
I'm making a quiz app.To show the progress of the quiz there is question pallette of small boxes which turn yellow when users click on any of the the radio button to show that the user has attempted the question.Along with this there is a button to move to the previous question.To show the users initial answer I have used ng-checked directive with some logic in the controller.Everything is working fine but after attempting a question when I move to the next question and click on the same option as the previous question then the question pallette box does not turn yellow.But when I click on the other option it works fine.
.html
<div class="questionsBox" >
<div class="questions">{{liveCtrl.questions[liveCtrl.activeQuestion].question}}</div>
<ul class="answerList">
<li>
<label>
<input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===1" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,1)" name="answerGroup" value="0" > {{liveCtrl.questions[liveCtrl.activeQuestion].optionA}}</label>
</li>
<li>
<label>
<input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===2" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,2)" name="answerGroup" value="1" > {{liveCtrl.questions[liveCtrl.activeQuestion].optionB}}</label>
</li>
<li>
<label>
<input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===3" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,3)" name="answerGroup" value="2" > {{liveCtrl.questions[liveCtrl.activeQuestion].optionC}}</label>
</li>
<li>
<label>
<input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===4" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,4)" name="answerGroup" value="3" > {{liveCtrl.questions[liveCtrl.activeQuestion].optionD}}</label>
</li>
</ul>
<div class="questionsRow">
<button ng-disabled="liveCtrl.questions.length==liveCtrl.activeQuestion+1" class="subques btn btn-lg btn-secondary" ng-click="liveCtrl.nextQuestion()">Save & Next</button>
<button ng-click="liveCtrl.prevQuestion()" ng-disabled="liveCtrl.activeQuestion == 0" class="subques btn btn-lg btn-secondary" >Previous</button>
</div>
</div>
//Question Pallete
<div class="question-pallete">
<div id="{{$index}}" ng-repeat="question in liveCtrl.questions" class="square">
<a ng-click="liveCtrl.gotoQues($index)">
{{$index + 1}}
</a>
</div>
//jquery to give color to the boxes
<script type="text/javascript">
$(document).on('click',"input[name='answerGroup']",function(){
var qid=$(this).data('id');
console.log(qid);
$('#'+qid).addClass('box-color');
});
</script>
Controller functions
this.nextQuestion=()=>{
live.activeQuestion++;
//console.log(live.activeQuestion);
};
this.prevQuestion=()=>{
live.activeQuestion--;
//console.log(live.activeQuestion);
};
this.gotoQues=(qno)=>{
live.activeQuestion=qno;
}
this.answers=(qid,option)=>{
//console.log(qid);
live.useranswers[qid]={
q:option
};
When I'm tried to console qid in jquery part it outputs the same qid for the same option in the next question but it is not the case for other options.I think "data-id" in html is not updating for that case.Sorry If I was not able to explain it properly.
I find 2 issues with your implementation.
I don't see ng-model in any of your input field.
Why don't you use ng-class instead of using jquery to get the id and add class?
<label ng-class="val==0 ? 'highlight':''">
<input type="Radio" ng-model="val" ng-value="0">Option A</label>
Here is the jsfiddle link
I am creating a simple product filter using JQUERY. The result are showing for the check box values but not for Select Box Values. I would like to use both features. The results are showing according to the DIV class "xxx" value applied on each product. You can find a live example at: [Demo]: http://jsfiddle.net/shamsmaxcom/rc5ctjez/? "click here for live demo" And the source code is pasted below. Please help. Thanks
<div id="solution_finder">
<h1 style="font-size:27px; margin-top:45px; margin-left:40px; font-weight:normal;"> Product Filter </h1>
<ul id="filters" style="list-style:none; margin-top:25px; line-height:30px; ">
<li>
<input type="checkbox" value="all" checked="checked" id="all" style="display:none;">
</li>
<li>
<input type="checkbox" value="3xzoom" id="3xzoom">
<label for="filter-category">3x video zoom</label>
</li>
<li>
<input type="checkbox" value="touch" id="touch">
<label for="filter-category">Touch ID</label>
</li>
<li>
<input type="checkbox" value="burstmode" id="burstmode">
<label for="filter-category">Burst mode</label>
</li>
<li>
<input type="checkbox" value="antireflective" id="antireflective">
<label for="filter-category">Antireflective coating</label>
</li>
</ul>
<div style="margin-left:43px;">
<select id="genre" onChange="return selectOption();">
<option value="All">All</option>
<option value="with-retina">With Retina Display</option>
<option value="without-retina">Without Retina Display</option>
</select>
</div>
<div style="width:840px; height:148px; clear:both; margin-top:40px; margin-left:43px;">
<div id="so_air2" class="category 3xzoom touch burstmode antireflective with-retina all" ><a href="#" ><h1>iPad Air 2</h1> </a></div>
<div id="so_air" class="category 3xzoom with-retina all" ><a href="#" ><h1>iPad Air</h1></a></div>
<div id="so_mini3" class="category 3xzoom touch with-retina all" ><a href="#" ><h1>iPad mini 3</h1></a></div>
<div id="so_mini2" class="category 3xzoom with-retina all" ><a href="#" > <h1>iPad mini 2</h1> </a></div>
<div id="so_mjni" class="category all" ><a href="#" > <h1>iPad mini</h1> </a></div>
</div>
<script type="text/javascript">
$('input').change (function() {
var selector = $('input:checkbox').map(function(){
return this.checked ? '.' + this.id : '';
}).get().join('');
var all = $('div[class^="category"]');
if(selector.length)
all.hide().filter(selector).show()
else all.hide();
});
</script>
</div>
I've changed your HTML and javascript code a bit to make it work.
This is the running JSFiddle.
The code that does the trick of using values of both checkboxes and dropdown is
$(':input').change(function(evt){
var filter = $(':input:checked,select').map(function(index, el) {
return "." + el.value;
}).toArray().join("");
$(".category").hide().filter(filter).show();
});
Mind that I've used :input selector instead of input to tell jQuery to also include select element when defining change event handler.
What change event handler does afterwards is
It generates a CSS selector filter:
Selects all checked checkbox inputs and dropdowns
Maps each resulting element to its CSS-class-compliant value (adding dot in front)
Changes jQuery set to a normal array and
Joins all strings together
Shows matching results by:
Hides all result elements
Filters them according to previously generated filter and
Shows matching ones
This filter uses AND predicate logic. If you wanted to use OR, then the only difference would be when joining filter classes:
....join(", ");
My problem is that I have 2 blocks in modal and when I click on .emailInbound checkbox it toggle .in-serv-container open, but when I click on .accordion-heading to open comment part it makes .in-serv-container collapse.
What can be a reason?
HTML:
<label class="checkbox">
<input class="emailInbound" type="checkbox" onclick="toggleInServ(this)">Использовать Email для регистрации обращений
</label>
<div id='in-serv-container'>
<div><strong>Настройка входящей почты</strong></div>
<div>
<input class="emailOutserver" type="text" placeholder="Сервер входящей почты">
<input class="emailOutserverPort" type="text" placeholder="Порт">
</div>
<div>
<select class="emailOutProtocol half" style="width: 49%!important;">
<option value='usual'>Обычный</option>
<option value='ssl'>SSL</option>
</select>
<input class="emailInFolder half" type="text" placeholder="Папка входящей почты">
</div>
<div class="modal-body-container">
<input type="text" placeholder="Опции">
</div>
<button class="btn btn-link">Проверить подключение</button>
<hr>
</div>
<div class="accordion" id="comment-wrapper">
<div class="accordion-heading" data-toggle='collapse' data-target='#emailComment' onclick='toggleChevron(this)'>
<strong>Комментарий</strong> <i class='icon-chevron-right'></i>
</div>
<div id="emailComment" class="collapse" data-parent="#comment-wrapper">
<textarea class="emailComment"></textarea>
</div>
</div>
JS:
function toggleInServ(box){
var checked = $(box).prop('checked');
if(checked){
$('#in-serv-container').css('height', '170px');
}else{
$('#in-serv-container').css('height', '0px');
}
}
function toggleChevron(o){
var icon = $(o).children('[class*=icon]');
if(icon.hasClass('icon-chevron-right')){
icon.removeClass('icon-chevron-right');
icon.addClass('icon-chevron-down');
}else{
icon.removeClass('icon-chevron-down');
icon.addClass('icon-chevron-right');
}
}
If I'm in the right track at this, you want each dropdown to stay on opened if the checkbox is ticked? What ever is the case here, please provide us with your CSS-styling as well. Would be best if you'd give us JSFiddle of your case.
Changing just the
height
attribute of your CSS seems like a bad idea. Instead of that, you could try using
display: block;
and
display: none;
So it would really be a hidden field before it gets selected. Not the answer to the question itself, but just something to note.
It was because of 'bubbling'. I added e.stopPropoganation() and it help.