Develop Reference

Bootstrap list-items activating on embedded span

Sorry for the title, I found no better way to describe it.
I have a list-group and want the buttons to show a specific color when active.
but somehow, the embedded spans capture the click and seem to not count as part of the a.
how can I fix this?
I want the button to change color, no matter where I click (on span or anywhere else)
The code is here:
https://jsfiddle.net/zj6uwmvu/
thanks

Here is the revised code for your click handler. If the event target is not a link, it means that the child badge was clicked. If this is the case, we find the closest link (the parent) and assign it as the target.
$('.location').find('.location-picker-list .list-group-item').on('click', function(e) {
var target = $(event.target);
if (!target.is('a')) {
target = target.parent('a')
}
e.preventDefault()
target.closest('.list-group').children(".active").removeClass('active')
target.addClass('active')
})
https://jsfiddle.net/zj6uwmvu/11/

instead of getting the item by "a", try getting it by its class like this:
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover{
background-color: red; //instead of red put the color that you want.
}

jQuery, DOM and on() method

I have a problem with jQuery, DOM and on() method. This is my div:
<div class="box">
<p class="addBox">Add Box</p>
<p class="remBox">Remove Box</p>
<textarea name="box[]"></textarea>
</div>
And a jQuery code:
$(document).on("click", ".addBox", function(event){
$(this).parent().append('<div class="box"><p class="addBox">Add Box</p><p class="remBox">Remove Box</p><textarea name="box[]"></textarea></div>').children(':last').hide().fadeIn(1000);
});
$(document).on("click", ".remBox", function(event){
$(this).parent().hide(1000).delay(1000, empty());
});
What I'm trying to achieve is a box with two buttons, one of them will make another copy of this box, and the other one will delete the chosen box. Two copies of the box are 'hardcoded' in index file, thus available in DOM from the start.
Buttons do they basic purpose, but DOM structure is getting crazy. If I press the 'add box' link on a newly created box, the new one will show up right after the one I clicked. However, sometimes it will show up at the end of the list. It's the same with 'del box' link, sometimes it deletes only one box, sometimes the one I want and two or three more. What do I do wrong? Thanks!

You probably want .after() (or .before()), but not .append(). That, and your .delay() syntax isn't correct.
$(document).on("click", ".addBox", function (event) {
$(this).parent().after('<div class="box"><p class="addBox">Add Box</p><p class="remBox">Remove Box</p><textarea name="box[]"></textarea></div>').children(':last').hide().fadeIn(1000);
});
$(document).on("click", ".remBox", function (event) {
$(this).parent().hide(1000).delay(1000).remove();
});
jsFiddle example

The reason that you're seeing all of your boxes removed sometimes is that you're appending new boxes to the parents of the .addBox item, which is the box div -- so you're getting boxes nested in boxes, rather than a bunch of .box divs in a row. If you change
$(this).parent().append( ... // removed for clarity
to
$('body').append( ... // the rest of your code
You won't get that improper nesting, and your boxes will correctly remove only themselves.

toggling classes on/off over multiple links

I can't seem to find exactly this issue on SE. I have a number of links in a list. When a link is clicked, the active class is added. If another link is clicked, I want that to go active and the previous active link to go inactive.
<li>
<div class="yearaction year1">
</div>
2007
</li>
<li>
<div class="yearaction year2">
</div>
2008
</li>
<li>
<div class="yearaction year3">
</div>
2009
</li>
.
.
.
$(".gotoslide").click(function(){
$(this).toggleClass("activeyear inactiveyear");
});
This implementation doesn't affect the other links. How do I make this toggle work correctly?

You're almost there. This will toggle the classes on the link you click on. To also toggle them on the one you had previously clicked on:
$(".gotoslide").click(function(){
// previously active
$(".activeyear").toggleClass("activeyear inactiveyear");
$(this).toggleClass("activeyear inactiveyear");
});

You have to toggle it individually. A good workaround is to attach data-* to each link.
Then
$(".gotoslide").click(function(){
$(this).toggleClass("activeyear inactiveyear");
var year = parseInt($(this).data('year')) - 1;
$('#year' + year).toggleClass("activeyear inactiveyear");
});

It depends a little on what's supposed to happen when you click the same target twice and how you have set up those classes. I think this line of thinking might help you:
$(".gotoslide").click(function () {
$(".gotoslide").removeClass("activeyear"); // removes .activeyear from all items
$(this).addClass("activeyear"); // add .activeyear to this specific item
});

It doesn't affect the other links because by using:
$(this)
you are referring only to that particular instance of .gotoslide class (the one that was clicked).
To affect all the other elements with .gotoslide class, refer to them with:
$('.gotoclass')

You can try this, just toggle one class (active) with the use of the .toggleClass() method. This way you can assume the non-active state doesn't have the class of active and use CSS to style them accordingly. This does a check for another active element, if there is one, removes the active class and makes itself active.
$(document).on('click','.gotoslide', function (e) {
if($('.gotoslide.active').length) {
$('.gotoslide.active').removeClass('active');
}
$(this).toggleClass('active');
});

You have to first clean up the other links and then set the clicked link to the correct class.
Instead of toggling classes, a safer way to go about it is set the classes explicitely to what they are supposed to be with removeClass and add Class. Initially set all all the $('.activeYear') elements (presumable only one) to inactive and then set the clicked link to 'inactiveyear'
$(".gotoslide").click(function(e){
e.preventDefault();
$(".activeyear").removeClass("activeyear").addClass("inactiveyear");
$(this).toggleClass("activeyear inactiveyear");
});
Working example here: http://jsfiddle.net/hVLML/4/

Swap class on click

I've been trying to figure out how I'm supposed to change a class of an element when you click it.
At the moment i have two classes (cOpen and cClosed). When you open the page the div is set to 'cClosed'.
<div id="camera" class="cClosed" onClick="cameraToggle('weekLoaderWrapper', 'cameraContainer');">Kamera</div></a>
The things within onClick is not relevant to my question btw..
I've also put this script in the code
$('#camera').click(function() {
$(this).toggleClass('cOpen');
$(this).toggleClass('cClosed');
});
What I want it to do is to when you press the "camera"-div the class simply swaps to cClosed instead of cOpen, and vice verse when you click it again. This isn't working atm.
My problem is how i'm supposed to "toggle" the div so it swaps the class of the "camera"-div.

Why are you using two classes? Use one class to identify the open and none to denote closed.
$('#camera').click(function() {
$(this).toggleClass('cOpen');
});

It's as simple as:
$('div').click(
function(){
$(this).toggleClass('cClosed cOpen');
});​​​​​​​​​​​​​​
JS Fiddle demo.
Though I second Starx's suggestion in this; but it's your HTML.
Reference:
toggleClass().

jQuery click function using same classes

I have a dropdown function that I need to work only on the div clicked, not all (I have 14+ of the same classes on the page that need to be displayed when a certain one is clicked)
At the moment my jQuery is as follows.
$('.qacollapsed').hide();
$('.qa').click(function () {
$('.qacollapsed').slideToggle();
$(this).toggleClass('active');
});
Of course, that is toggling all qacollapsed classes when there is 14 on the page (Q&A)
Is there a way for it to only drop down the one that is clicked?
the HTML
<div class="qa">
<h4 class="question"> </h4>
</div>
<div class="qacollapsed">
<p> </p>
</div>

It would be helpful to provide a snippet of HTML here, but I'll take a guess at the structure of your markup for now..
Instead of referencing all .qacollapsed elements, you need find elements that are close to the .qa that was clicked, e.g.:
$('.qa').click(function () {
$(this) // start with the clicked element
.find('.qacollapsed') // find child .qacollapsed elements only
.slideToggle();
$(this).toggleClass('active');
});
This will work if .qacollapsed is inside .qa - if not, you might need to use next (for siblings), or one of the other jQuery tree traversal methods.

Yo could find() it or use this as a context in the selector to choose only a descendent of the clicked object
$('.qa').click(function () {
$('.qacollapsed', this).slideToggle();
//You could do $(this).find('.qacollapsed').slideToggle();
$(this).toggleClass('active');
});

Check out the jQuery selectors and why not just use $(this)?

$('.qacollapsed').hide();
$('.qa').click(function () {
$(this).toggleClass('active').next().slideToggle();
});

Personally, I'd give all the divs IDs, the clickable bit being the ID of the question in the database for example, and the answer just being id='ID_answer' or something, then use jquery to slide in the div with the id corresponding to the link clicked, ie
Var showIt = $(this).attr('id') + '_answer'
$('.qacollapsed').not('#'+showIt).hide();
$('#'+showIt).slideToggle;
That will hide all the divs without that ID and show the required one.
Dexter's use of .next above looks simpler though, I've not tried that as being relatively new to jquery too.