Develop Reference

Simplifying Active States

I have a question that I believe comes down to method preference.
In the following code when the div parent element is clicked on, the div itself expands and also triggers an icon animation
var slideSection6 = document.getElementById("manualsHandbooks").addEventListener("click", function()
{
if (this.parentElement.style.height == "60px" || this.parentElement.style.height == "")
{
this.parentElement.style.height = "215px";
document.getElementById("MAHB").classList.add("active");
}
else
{
this.parentElement.style.height = "60px";
document.getElementById("MAHB").classList.remove("active");
}
}, false);
I was thinking about how easy it was just to add a class and change the state of the icon and I wanted to experiment and try adding the another click event just to the icon to make it animate on a click and active the parent element in the div as well. Basically the reverse of the above.
I thought it would be as simple as adding another condition to the if statement to the effect of
|| document.getElementId("MAHB").classList.add=("active") == true
But this doesn't work and I know it's not proper form. Could someone get me started so I could figure this out?

Element.classList has a toggle method that could make things a bit easier. If you want to check if a certain class is present, you can also use classList.contains.
I'd suggest not using the height of your elements to determine their current state. Why don't you alter the height using an active css class?
Your click handler could then be:
var button = document.getElementById("manualsHandbooks");
button.addEventListener("click", function() {
this.parentElement.classList.toggle("active");
document.getElementById("MAHB").classList.toggle("active");
}, false);
You can read more about classList here: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Can't make the if else jquery statement work

I added the code to the js below. When you click on either the Sign up or Login the arrow moves / point up, but when you close it again it stay that way. Can someone help me out figure what to do.
I tried using this post but cant make this work either here
Here is the Jquery script I use
$(document).ready(function () {
$('#login-trigger').click(function () {
$('#login-content').slideToggle();
$(this).addClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲');
$('#signup-content').slideUp();
})
$('#signup-trigger').click(function () {
$('#login-content').slideUp();
$(this).addClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲');
$('#signup-content').slideToggle();
});
});
Here is my jsfiddle, ( I know some people don't pref jsfiddle but since I have a lot of code and it will be so much easier to show what I'm trying to do with it)

the problem is since you are adding the class active to it, on click event .. and right after, you are checking if it has a class active(which is always true)...
use toggleClass(it toggles the mentioned class) instead of addClass and check with hasClass
$(document).ready(function () {
$('#login-trigger').click(function () {
$('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')){
$(this).find('span').html('▲');
}else{
$(this).find('span').html('▼');
}
$('#signup-content').slideUp();
});
.... //same for signup
fiddle here
and yes I know some people don't pref jsfiddle .. i guess you are wrong , i am sure most people prefer jsfiddle rather than the code itself since it is easier to test in fiddle.

You missed else part.
Try:
$(this).toggleClass('active');
if ($(this).hasClass('active')){
$(this).find('span').html('▲');
}
else{
$(this).find('span').html('▰');//code of down arrow
}
Fiddle here.

You never remove the class active, so after the first click it looks like it is always active, and you also never change the triangle shape after the first click.
This code should work for the login:
$('#login-trigger').click(function () {
$('#login-content').slideToggle();
if (!$(this).hasClass('active')) { //Now is not active, I'll make it active
$(this).addClass('active'); //Add class
$(this).find('span').html('▲'); //BLACK UP-POINTING TRIANGLE
} else { //Now is active, I'll make it not active
$(this).removeClass('active'); //Remove class
$(this).find('span').html('▼'); //BLACK DOWN-POINTING TRIANGLE
}
$('#signup-content').slideUp();
})
This is the jsfiddle link.

change div class onclick on another div, and change back on body click

Let me define the problem a little bit more:
i have
<div class="contact">
<div id="form"></div>
<div id="icon"></div>
</div>
i want onclick on #icon, to change the class of .contact to .contactexpand( or just append it).
Then i want that the on body click to change the class back, but of course that shouldnt happen when clicking on the new class .contactexpand, and if possible that clicking on icon again changes the class back again.
I tried numerous examples and combinations but just couldn't get the right result and behavior.

Check this: Working example
Let's go step by step
I want onclick on #icon, to change the class of .contact to .contactexpand( or just append it). […] and if possible that clicking on icon again changes the class back again.
You want to use the toggleClass() method to achieve this. Simply:
$('#icon').on('click', function(e){
$(this).parent()
.toggleClass('contact')
.toggleClass('contactexpand');
});
Then i want that the on body click to change the class back
You will have to make sure that body removes contactexpand class and adds contact. At this point I would just give the container element an id (or class if you prefer), just to make things simpler. Then what you do is pretty simple:
$('body').on('click', function(e){
$('#thisdiv')
.removeClass('contactexpand')
.addClass('contact');
});
but of course that shouldnt happen when clicking on the new class .contactexpand.
This is the step that the other answers missed, I think. Since everywhere you click, you also click on the body element, you will always trigger the click event on the body, hence removing the contactexpand class and adding the contact one.
Enter event.stopPropagation(). This method will make sure that the events doesn't bubble up the DOM, and will not trigger the body click.
$('#thisdiv').on('click', function(e){
e.stopPropagation();
});
Working example

You can add a class to parent element like the following code.
$(".contact #icon").click(function(){
var element = $(this).parent(".contact");
element.removeClass("contact").addClass("contactexpand");
});

I like to the jQuerys toggleClass function like so:
$('#icon').click(function(){
$('#contactbox').toggleClass('contact');
$('#contactbox').toggleClass('contactexpand');
});
Or you could use addClass('className') and removerClass('className') if you would like to apend it rather than toggle it :)
Here is an example: http://jsfiddle.net/aUUkL/
You can also add an onclick event to the body of the page and use hasClass('className') to see whether or not to toggle the class when the body is clicked. You could use something like this (Although I havent tested this bit!):
$('body').click(function(){
if( $('#contactbox').hasClass('contactexpand') ){
$('#contactbox').addClass('contact');
$('#contactbox').removeClass('contactexpand');
}
});

You can do this
$('body').on('click', function(event) {
if ($(event.target).attr('id') == 'icon') {
$(event.target).parent().toggleClass('contactexpand');
} else {
$('.contact').removeClass('contactexpand');
}
});
Check out this jsfiddle

var $contact = $('.contact');
$contact.find('#icon').click(function(e, hide) {
e.stopPropagation();
$contact[hide ? 'removeClass' : 'toggleClass']('contactexpand');
});
$(document).on('click', function(e) {
if (e.srcElement === $contact[0]) return;
$contact.find('#icon').trigger('click', true);
});
http://jsfiddle.net/kZkuH/2/

Advice on how to update navigation code to hide and show hidden div

I currently have a list with one particular link that hides/shows a hidden div. As a link is clicked the class 'active' is removed and added and the hidden div checked to see whether it is visible or hidden and hidden/shown accordingly. This all works ok, but, there is one problem. When I click Square I want to show the #square but when I click it again I want to hide the #square but because Im checking for the .active this cant be done. Can anyone offer any suggestions on how I can update the code so this can be achieved?
JS
$(document).ready(function(){
var square = $('#square'),
test = $('#test');
square.hide();
test.find('a').on('click', function(e){
if( !$(this).hasClass('active') ){
if ( square.is(':visible') ){
square.hide();
}
var id = $(this).data('id');
test.find('a').removeClass('active');
$(this).addClass('active');
if( id === 'square' ){
square.show();
}
}
e.preventDefault();
});
});​
HTML
<ul id="test">
<li>Triangle</li>
<li>Square</li>
<li>Circle</li>
</ul>
<div id="square"></div>​
Fiddle: http://jsfiddle.net/xBuUY/

I made a fork of your Fiddle.
I've moved the block for testing whether the square should be visible or not outside of checking which link should be active. The #square is toggled and not only shown which garanties that it's hidden when it's already active. Just test the Fiddle.
Apart from that I optimized the event-handler: It now uses delegation, which is faster than just the link handler on each of the links. Bubbling of the links is prevented by e.stopPropagation(). I've added this before any other methods or anything else is called for performance reasons.

Move this block of code --
if ( square.is(':visible') ){
square.hide();
}
outside of the hasClass('active') check.

Your logic can be simplified, you're wanting to toggle square regardless of class, so I've removed the square toggle outside of the class test. Try this Fiddle HERE

check if element class have changed

i've got some JS library, thats on click to the html element changes its class. I would like to write function, that would check if class had been changed, and then add image to this element. Can you help me with this?
thanks!

If you're using jQuery try this:
$(document).ready(function() {
// get the class that's set on page load
var current = $('#element').attr('class');
$('#element').click(function(e) {
if ($(this).attr('class') != current) {
// class has been changed, do something
}
});
});
Here is an example at jsFiddle.net.
Disclaimer: Without more details about which elements have onclick event listeners that change which elements` class, I cannot give you real working code for you situation. Instead, I can only give you some logic which I just did.

$("#elemID").click(function() {
$("#div").removeClass('a');
$("#div").addClass('b');
if ($("#div").attr('class') == 'b') {
$("#div").append("<p>Hello</p>");
}
});
Or
$("#elemID").click(function() {
$("#div").removeClass('a');
$("#div").addClass('b');
if ($("#div").hasClass('b')) {
$("#div").append("<p>Hello</p>");
}
});

What you can proceed with Krystian is that everytine u click on an element, add a class "say classClicked" to it. Then with the the help of hasClass u can find out the class attached to that element. If is satisfies your condition, add image.
Or if the class changes on each click and you know the name of the changed class, just check using
if($(this).hasClass("b")){
do your action
}
Hope this helps.