I am trying to create an expandable accordion using jquery. I am not able to figure out that how am I supposed to prevent it from expanding on page load. I have no idea of jquery,and any help will be greatly appreciated.
<ul>
<li class="expandable root">
<label for=" Oraganization" class="active"> Oraganization</label>
<span class="pull-right oraganization active expand-icon glyphicon glyphicon-minus"></span>
<ul id="accordion">
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Manager-1">
<label for="Manager-1"> Manager-1</label>
<ul id="accordion">
<li>
<input type="checkbox" id="Sub-Manager-1">
<label for="Sub-Manager-1"> Sub-Manager-1</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Sub-Manager-2">
<label for="Sub-Manager-2"> Sub-Manager-2</label>
<ul class="accordion">
<li>
<input type="checkbox" id="Associate-1">
<label for="Associate-1"> Associate-1</label>
</li>
<li>
<input type="checkbox" id="Associate-2">
<label for="Associate-2"> Associate-2</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Associate-5">
<label for="Associate-5"> Associate-5</label>
<ul class="accordion">
<li>
<input type="checkbox" id="Sub-associate-1">
<label for="Sub-associate-1"> Sub-associate-1</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-2">
<label for="Sub-associate-2"> Sub-associate-2</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-3">
<label for="Sub-associate-3"> Sub-associate-3</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-4">
<label for="Sub-associate-4"> Sub-associate-4</label>
</li>
</ul>
</li>
</ul>
</li>
</li>
</ul>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-2">
<label for="Manager-2"> Manager-2</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-3">
<label for="Manager-3"> Manager-3</label>
</li>
</ul>
</li>
</ul>
JS File:
$(document).ready(function(){
$('.expand-icon').click(function(){
var elem = $(this);
if(elem.hasClass('active')) {
elem.removeClass('active');
var subElem = elem.siblings('ul');
var nestedElem =elem.siblings('ul').find('ul');
if(nestedElem.length == 0) {
subElem.slideUp('fast');
}
else {
nestedElem.slideUp('fast',function(){
subElem.slideUp('fast');
});
}
$.when(elem.removeClass('glyphicon-minus')).then(function(){
elem.addClass('glyphicon-plus');
});
}
else {
elem.addClass('active');
elem.siblings('ul').slideDown('fast',function(){
elem.siblings('ul').find('ul').slideDown('fast');
});
$.when(elem.removeClass('glyphicon-plus')).then(function(){
elem.addClass('glyphicon-minus');
});
}
});
$('.expandable :checkbox').on('change', function() {
$(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
var sibs = false;
$(this).closest('ul').children('li').each(function () {
if($('input[type=checkbox]', this).is(':checked')) sibs=true;
});
$(this).parents('ul').siblings(':checkbox').prop('checked', sibs);
});
});
You an find the bootply at this link: http://www.bootply.com/1W8bSTnmx6
Fiddle Here
This is because you have this first accordian open when loading it. To fix it, do a click operation on this at the time of load with $($('#accordion .expand-icon')[0]).click();. Check the working example here http://www.bootply.com/vGoKbvfKtl
you are just displaying all the accordions when the page gets loaded since there is no hiding any where.
According to your code Since only the first Accordion contains the data, it is getting displayed else every expandable div will get displayed.
The solution for this is to add a hide class to the class accordion so that it does not display at the beginning, the at the time of click function, you can remove that class and it gets displayed.
$(document).ready(function(){
$('.expand-icon').click(function(){
$('ul').removeClass('hide')
var elem = $(this);
if(elem.hasClass('active')) {
elem.removeClass('active');
var subElem = elem.siblings('ul');
var nestedElem =elem.siblings('ul').find('ul');
if(nestedElem.length == 0) {
subElem.slideUp('fast');
}
else {
nestedElem.slideUp('fast',function(){
subElem.slideUp('fast');
});
}
$.when(elem.removeClass('glyphicon-minus')).then(function(){
elem.addClass('glyphicon-plus');
});
}
else {
elem.addClass('active');
elem.siblings('ul').slideDown('fast',function(){
elem.siblings('ul').find('ul').slideDown('fast');
});
$.when(elem.removeClass('glyphicon-plus')).then(function(){
elem.addClass('glyphicon-minus');
});
}
});
$('.expandable :checkbox').on('change', function() {
$(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
var sibs = false;
$(this).closest('ul').children('li').each(function () {
if($('input[type=checkbox]', this).is(':checked')) sibs=true;
});
$(this).parents('ul').siblings(':checkbox').prop('checked', sibs);
});
$('.organization').click(function(){
$('.accordion')[0].click()
})
});
<ul>
<li class="expandable ">
<label for=" Oraganization" class="active"> Oraganization</label>
<span class=" organization active expand-icon glyphicon glyphicon-minus"></span>
<ul id="">
<li class="expandable">
<span class="expand-icon glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-1">
<label for="Manager-1"> Manager-1</label>
<ul class="accordion hide">
<li>
<input type="checkbox" id="Sub-Manager-1">
<label for="Sub-Manager-1"> Sub-Manager-1</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Sub-Manager-2">
<label for="Sub-Manager-2"> Sub-Manager-2</label>
<ul class="accordion">
<li>
<input type="checkbox" id="Associate-1">
<label for="Associate-1"> Associate-1</label>
</li>
<li>
<input type="checkbox" id="Associate-2">
<label for="Associate-2"> Associate-2</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Associate-5">
<label for="Associate-5"> Associate-5</label>
<ul class="accordion">
<li>
<input type="checkbox" id="Sub-associate-1">
<label for="Sub-associate-1"> Sub-associate-1</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-2">
<label for="Sub-associate-2"> Sub-associate-2</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-3">
<label for="Sub-associate-3"> Sub-associate-3</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-4">
<label for="Sub-associate-4"> Sub-associate-4</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-2">
<label for="Manager-2"> Manager-2</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-3">
<label for="Manager-3"> Manager-3</label>
</li>
</ul>
</li>
</ul>
Here is the bootply,
Bootply link for it
Related
I have a div which has a ul and list items in it.
<div class="col-md-2"><input id="jackSerachBox" class="form-control input-md m-t-sm" type="text" placeholder="Search for Jacks.."></div>
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked" id="jacksTab">
<li role="presentation" class="active">
<a data-toggle="tab" class="dd-handle">
<input type="checkbox" id="JackcheckBox-3" name="selectedjacks" value="3">
<label class="text-muted text-uppercase small">NEW40206 </label> <span><i class="fa fa-hdd-o text-info small"></i></span>
</a>
</li>
<li role="presentation" class="">
<a data-toggle="tab" class="dd-handle">
<input type="checkbox" id="JackcheckBox-6" name="selectedjacks" value="6">
<label class="text-muted text-uppercase small">NewJack12 </label> <span><i class="fa fa-hdd-o text-info small"></i></span>
</a>
</li>
<li role="presentation" class="">
<a data-toggle="tab" class="dd-handle">
<input type="checkbox" id="JackcheckBox-4" name="selectedjacks" value="4">
<label class="text-muted text-uppercase small">Jack12 </label> <span><i class="fa fa-hdd-o text-info small"></i></span>
</a>
</li>
</ul>
</div>
I am trying to access it using :
$('#jackSerachBox').on('keyup', function (e) {
var input, filter, ul, li, a, i;
// filter = input.val().toUpperCase();
li = $('#jacksTab li');
li.each(function (e) {
a = $('a', $(e)).eq(0);
console.log(a.html())
//test.html(a.html())
})
})
But getting undefined. I did ask similar question , but that was answered with the context. To be fair , had marked that as answer and did not post follow ups on that.
To be more accurate this time here is the jsfiddle for same.
Simply use this inside your .each instead of using a parameter :
If you don't want to use this, you need to edit your .each() parameters to .each(_, e), since the first parameter from the callback is the index of the element.
See the jQuery#each documentation
$('#jackSerachBox').on('keyup', function(e) {
$('#jacksTab li').each(function() {
console.log($('a', this).html())
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2"><input id="jackSerachBox" class="form-control input-md m-t-sm" type="text" placeholder="Search for Jacks.."></div>
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked" id="jacksTab">
<li role="presentation" class="active">
<a data-toggle="tab" class="dd-handle">
<input type="checkbox" id="JackcheckBox-3" name="selectedjacks" value="3">
<label class="text-muted text-uppercase small">NEW40206 </label> <span><i class="fa fa-hdd-o text-info small"></i></span>
</a>
</li>
<li role="presentation" class="">
<a data-toggle="tab" class="dd-handle">
<input type="checkbox" id="JackcheckBox-6" name="selectedjacks" value="6">
<label class="text-muted text-uppercase small">NewJack12 </label> <span><i class="fa fa-hdd-o text-info small"></i></span>
</a>
</li>
<li role="presentation" class="">
<a data-toggle="tab" class="dd-handle">
<input type="checkbox" id="JackcheckBox-4" name="selectedjacks" value="4">
<label class="text-muted text-uppercase small">Jack12 </label> <span><i class="fa fa-hdd-o text-info small"></i></span>
</a>
</li>
</ul>
</div>
I've created a form and a part of this form is a list which has five elements. These elements can be hovered by mouse. The hovered elements have class of selected. The question is how can I take the value of this elements in order to send it to server?
<ul id="service" class="icon-group booking-item-rating-stars">
<li id="1">
<i class="fa fa-smile-o"></i>
</li>
<li id="2">
<i class="fa fa-smile-o"></i>
</li>
<li id="3">
<i class="fa fa-smile-o"></i>
</li>
<li id="4">
<i class="fa fa-smile-o"></i>
</li>
<li id="5">
<i class="fa fa-smile-o"></i>
</li>
</ul>
If I understand you correct this is what you need:
$('#service li').on('hover', function() {
sendToServer($(this).text());
});
And if you need to check selected class:
$('#service li').on('hover', function() {
var $this = $(this);
if ($this.hasClass('selected')) {
sendToServer($this.text());
}
});
Try this demo, if your <li> looks like this:
<li>
<input type="hidden" id="3" value="3">
<i class="fa fa-smile-o">c</i></li>
<li>
demo:
$(function() {
$('#service li').hover(function() {
$(this).addClass('selected'); // add selected class on hover
var data = $(this).find(':hidden').val(); // get input hidden value inside the li
sendToServer(data); // call send to server function passing data variable
}, function() {
$(this).removeClass('selected');
});
});
function sendToServer(data) {
console.log(data);
// insert send to server program here
}
.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="service" class="icon-group booking-item-rating-stars">
<li>
<input type="hidden" id="1" value="1">
<i class="fa fa-smile-o">a</i></li>
<li>
<input type="hidden" id="2" value="2">
<i class="fa fa-smile-o">b</i></li>
<li>
<input type="hidden" id="3" value="3">
<i class="fa fa-smile-o">c</i></li>
<li>
<input type="hidden" id="4" value="4">
<i class="fa fa-smile-o">d</i></li>
<li>
<input type="hidden" id="5" value="5">
<i class="fa fa-smile-o">e</i></li>
</ul>
I have checkboxes inside a dropdown menu. I've to get the checkboxes which are selected (checked)
Code:
<ul role="menu" class="dropdown-menu" id="comp">
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Monday</span>
</a>
</li>
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Tuesday</span>
</a>
</li>
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Wednesday</span>
</a>
</li>
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Thursday</span>
</a>
</li>
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Friday</span>
</a>
</li>
</ul>
<input type="submit" class="btn btn-info" onclick="myFunction()" value="Submit">
<script type="text/javascript">
function myFunction()
{
/* Get selected check boxes here */
}
</script>
You can try this solution also. Here you will get the checked checkbox elements list. You can also update this checked element list during run time also.
Check the following demo:
Fiddle Demo
Stack Example
$(function() {
var checkedItems = $("#comp input:checked");
console.log(checkedItems);
$("#comp input[type='checkbox']").change(function() {
if ($(this).attr("checked") == "checked") {
checkedItems.push($(this)[0]);//Add the checked element
console.log(checkedItems);
} else {
checkedItems.splice($.inArray($(this)[0], checkedItems), 1);//Remove the unchecked element
console.log(checkedItems);
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul role="menu" class="dropdown-menu" id="comp">
<li>
<a href="#">
<input type="checkbox" id="a1">
<span class="lbl"> Monday</span>
</a>
</li>
<li>
<a href="#">
<input type="checkbox" id="a2">
<span class="lbl"> Tuesday</span>
</a>
</li>
<li>
<a href="#">
<input type="checkbox" id="a3" checked="checked">
<span class="lbl"> Wednesday</span>
</a>
</li>
<li>
<a href="#">
<input type="checkbox" id="a4">
<span class="lbl"> Thursday</span>
</a>
</li>
<li>
<a href="#">
<input type="checkbox" id="a5">
<span class="lbl"> Friday</span>
</a>
</li>
</ul>
Check the console for selected checkboxes.
function myFunction(){
var checkBoxes=$("#comp input[type=checkbox]:checked");
console.log(checkBoxes);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul role="menu" class="dropdown-menu" id="comp">
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Monday</span>
</a>
</li>
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Tuesday</span>
</a>
</li>
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Wednesday</span>
</a>
</li>
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Thursday</span>
</a>
</li>
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Friday</span>
</a>
</li>
</ul>
<input type="submit" class="btn btn-info" onclick="myFunction()" value="Submit">
Try it, it will return all selected checkbox values as you select any checkbox:
<ul role="menu" class="dropdown-menu" id="comp">
<li><a href="#">
<input name="chklist" onclick="get_selected_val()" value="monday" type="checkbox">
<span class="lbl"> Monday</span>
</a></li>
<li><a href="#">
<input name="chklist" onclick="get_selected_val()" value="tuesday" type="checkbox">
<span class="lbl"> Tuesday</span>
</a></li>
<li><a href="#">
<input name="chklist" value="wednesday" onclick="get_selected_val()" type="checkbox">
<span class="lbl"> Wednesday</span>
</a></li>
<li><a href="#">
<input name="chklist" onclick="get_selected_val()" value="thursday" type="checkbox">
<span class="lbl"> Thursday</span>
</a></li>
<li><a href="#">
<input name="chklist" onclick="get_selected_val()" value="friday" type="checkbox">
<span class="lbl"> Friday</span>
</a></li>
</ul>
function get_selected_val() {
$('input[name="chklist"]:checked').each(function() {
console.log(this.value);
});
}
I have a list of checkboxes within multiple ul tags. I want to uncheck and check all using an href for each list. (There will be several lists, here I have provided HTML for two lists) The code does not work in that the checkboxes are not all checked or unchecked on click.. Can anyone help please?
Here is what I have tried so far in a JSFIDDLE
<div class="col-xs-4 col-lg-3">
<div class="btn-group options" id="checkboxes-div-1" class="checkbox-div">
<button class="btn btn-default dropdown-toggle open-first" type="button" data-toggle="dropdown" >
Select one or more options <span class="caret"></span>
</button>
<ul class="dropdown-menu check-first" id="close-out" role="menu" name="form3">
<li class="option">
<a class="checkall show-cross-2" href="#">Check all</a>
<a class="uncheckall" href="#">Uncheck all</a>
</li>
<li><strong>Group 1</strong></li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" class="only-this show-cross-2">Option #1 for group 1
</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" class="only-this show-cross-2">Option #2 for group 1
</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" class="only-this show-cross-2">Option #3 for group 1
</label>
</div>
</li>
<li><strong>Group 2</strong></li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" >Forum
</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Ipsum
</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Dorol
</label>
</div>
</li>
</ul>
</div> <!--/.btn-group-->
</div> <!--/.col-xs-6-->
</div> <!--/.third-row-->
<div class="row fourth-row">
<div class="col-xs-4 col-lg-3">
<div class="btn-group options hide" id="checkboxes-div-2" class="checkbox-div">
<button class="btn btn-default dropdown-toggle open-second" type="button" data-toggle="dropdown" >
Select one or more options <span class="caret"></span>
</button>
<ul class="dropdown-menu check-second" id="close-out" role="menu" name="form3">
<li class="option">
<a class="checkall show-cross-2" href="#">Check all</a>
<a class="uncheckall" href="#">Uncheck all</a>
</li>
<li><strong>Group 1</strong></li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" >Option #1 for group 1
</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" >Option #2 for group 1
</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" >Option #3 for group 1
</label>
</div>
</li>
<li><strong>Group 2</strong></li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Forum
</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Ipsum
</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Dorol
</label>
</div>
</li>
</ul>
</div> <!--/.btn-group-->
</div> <!--/.col-xs-6-->
</div> <!--/.fourth-row-->
My jquery:
$.each($('.checkbox-div'), function () {
$(".checkall").click(function() {
$(":checkbox.only-this").attr("checked", true);
})
$(".uncheckall").click(function() {
$(":checkbox").attr("checked", false);
})
});
http://jsfiddle.net/r2yLq61o/
Use this instead:
$(".checkall").click(function () {
$(this).closest('ul').find('input[type="checkbox"]').prop("checked", true);
})
$(".uncheckall").click(function () {
$(this).closest('ul').find('input[type="checkbox"]').prop("checked", false);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-xs-4 col-lg-3">
<div class="btn-group options" id="checkboxes-div-1" class="checkbox-div">
<button class="btn btn-default dropdown-toggle open-first" type="button" data-toggle="dropdown">Select one or more options <span class="caret"></span>
</button>
<ul class="dropdown-menu check-first" id="close-out" role="menu" name="form3">
<li class="option"> <a class="checkall show-cross-2" href="#">Check all</a>
<a class="uncheckall" href="#">Uncheck all</a>
</li>
<li><strong>Group 1</strong>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" class="only-this show-cross-2">Option #1 for group 1</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" class="only-this show-cross-2">Option #2 for group 1</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" class="only-this show-cross-2">Option #3 for group 1</label>
</div>
</li>
<li><strong>Group 2</strong>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Forum</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Ipsum</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Dorol</label>
</div>
</li>
</ul>
</div>
<!--/.btn-group-->
</div>
<!--/.col-xs-6-->
</div>
<!--/.third-row-->
<div class="row fourth-row">
<div class="col-xs-4 col-lg-3">
<div class="btn-group options hide" id="checkboxes-div-2" class="checkbox-div">
<button class="btn btn-default dropdown-toggle open-second" type="button" data-toggle="dropdown">Select one or more options <span class="caret"></span>
</button>
<ul class="dropdown-menu check-second" id="close-out" role="menu" name="form3">
<li class="option"> <a class="checkall show-cross-2" href="#">Check all</a>
<a class="uncheckall" href="#">Uncheck all</a>
</li>
<li><strong>Group 1</strong>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Option #1 for group 1</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Option #2 for group 1</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Option #3 for group 1</label>
</div>
</li>
<li><strong>Group 2</strong>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Forum</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Ipsum</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Dorol</label>
</div>
</li>
</ul>
</div>
<!--/.btn-group-->
</div>
<!--/.col-xs-6-->
</div>
<!--/.fourth-row-->
And one more way, more strictly connected to DOM structure:
Fiddle.
$(document).ready(function()
{
$(".checkall").click(function()
{
handleOptions(this, true);
});
$(".uncheckall").click(function()
{
handleOptions(this, false);
});
function handleOptions(element, value)
{
var optionBlocks = $(element).parent().siblings('.option');
optionBlocks.find("input").prop("checked", value);
}
});
I'm struggling to find the correct code to a navigation sidebar on a angularJS app. What should happen is when you click a link a background color should highlight the active link. It does work as expected except you have to click each link twice before the highlight shows.
What is it that I'm doing wrong? Any help would be greatly appreciated.
javascript
$scope.addActiveClass = function ($index) {
$scope.addActiveClass = $index;
var checked = $('ul.sidebar2-nav li');
$(checked).on("click", "", function () {
$(this).addClass('active-label');
});
}
html
<nav id="program-editor-pullout" menustate="closed" >
<ul class="list-unstyled sidebar2-nav">
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: home}" ui-sref-active="active" ui-sref=".home">Home</a>
</label>
</div>
</li>
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: evaluations}" ui-sref-active="active" ui-sref=".evaluation">Evaluations</a>
</label>
</div>
</li>
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: questions}" ui-sref-active="active" ui-sref=".question">Questions</a>
</label>
</div>
</li>
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass()" ng-class="{active: hstranscripts}" ui-sref-active="active" ui-sref=".hstranscripts">High School Transcripts</a>
</label>
</div>
</li>
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: collegetranscripts}" ui-sref-active="active" ui-sref=".collegetranscripts">College Transcripts & Course Work</a>
</label>
</div>
</li>
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: prerequisites}" ui-sref-active="active" ui-sref=".prerequisites">Prerequisites</a>
</label>
</div>
</li>
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: documents}" ui-sref-active="active" ui-sref=".document">Documents</a>
</label>
</div>
</li>
</ul>
</nav>
CSS
ul.sidebar2-nav li a.active {
color: #000;
cursor: pointer;
text-decoration: none;
}
ul.sidebar2-nav li.active-label {
background: whitesmoke;
}
I found the solution. Your example was correct, but in my html code I had this:
<li ui-sref-active="active-label" ng-click="addActiveClass($event, $index)">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-class="{active: home}" ui-sref-active="active" ui-sref=".home">Home</a>
</label>
</div>
</li>
Notice how the anchor tag has the ng-class and the ui-sref-active on it. I removed these attributes and it works as expected. Thank you for your guidance, I appreciate it!!
Move click event from a to parent li tag
<nav id="program-editor-pullout" menustate="closed" >
<ul class="list-unstyled sidebar2-nav">
<li ui-sref-active="active-label" ng-click="addActiveClass($event, $index)">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-class="{active: home}" ui-sref-active="active" ui-sref=".home">Home</a>
</label>
</div>
</li>
Change your click handler to something like this
$scope.addActiveClass = function ($event, $index) {
$scope.addActiveClass = $index;
//var checked = $('ul.sidebar2-nav li');
//$(checked).on("click", "", function () {
// $(this).addClass('active-label');
//});
$($event.target).addClass('active-label');
}