We Keep Coding

cannot close accordion toggle after open

I can't make my accordion close. It opens on click, however when I click back it doesn't close.
Here is my code:
MYPRO.accordion = function () {
var $acpanel = $(".accordion > .accordion-content"),
$acsnav = $(".accordion > .accordion-title > a");
$acpanel.hide().first().slideUp("easeOutExpo");
// $acsnav.first().addClass("active");
$acsnav.on('click', function () {
var $this = $(this).parent().next(".accordion-content");
if ($this.addClass("active")){
$acsnav.removeClass("active");
$acpanel.first($this).slideDown();
$(this).parent().next().slideDown("easeOutExpo");
}
else
{
$acpanel.first($this).slideUp();
$(this).parent().next().slideUp("easeInExpo");
//$acsnav.removeClass('active').slideUp("easeInExpo");
}
return false;
}); }

Every time you click, $this.addClass("active") returns a jQuery object, so the if will allways evaluate as true, and slide down the tab, never reaching the else statements.
Try something like:
var $acpanel = $(".accordion > .accordion-content"),
$acsnav = $(".accordion > .accordion-title > a");
$acpanel.slideDown("easeOutExpo");
$acsnav.addClass("active");
$acsnav.on('click', function(e) {
if ($acsnav.hasClass("active")) {
$acsnav.removeClass("active");
$acpanel.show().slideUp("easeInExpo");
} else {
$acsnav.addClass("active")
$acpanel.hide().slideDown("easeOutExpo");
}
});
This way you'll first check if its active. If so, slide up and remove the active class. If not active, slide down and remove the active class.
Here is a JSFiddle.
Edit: Updated code and added JSDFiddle.

Get Bouncy Content Filter to run automatically

I'm using this awesome bouncy filter from Codyhouse but i can't for the life of me figure out how to make it run automatically i.e flip on its own and still accept user click events. The jsfiddle...Thanks.
jQuery(document).ready(function($) {
//wrap each one of your filter in a .cd-gallery-container
bouncy_filter($('.cd-gallery-container'));
function bouncy_filter($container) {
$container.each(function() {
var $this = $(this);
var filter_list_container = $this.children('.cd-filter'),
filter_values = filter_list_container.find('li:not(.placeholder) a'),
filter_list_placeholder = filter_list_container.find('.placeholder a'),
filter_list_placeholder_text = filter_list_placeholder.text(),
filter_list_placeholder_default_value = 'Select',
gallery_item_wrapper = $this.children('.cd-gallery').find('.cd-item-wrapper');
//store gallery items
var gallery_elements = {};
filter_values.each(function() {
var filter_type = $(this).data('type');
gallery_elements[filter_type] = gallery_item_wrapper.find('li[data-type="' + filter_type + '"]');
});
//detect click event
filter_list_container.on('click', function(event) {
event.preventDefault();
//detect which filter item was selected
var selected_filter = $(event.target).data('type');
//check if user has clicked the placeholder item (for mobile version)
if ($(event.target).is(filter_list_placeholder) || $(event.target).is(filter_list_container)) {
(filter_list_placeholder_default_value == filter_list_placeholder.text()) ? filter_list_placeholder.text(filter_list_placeholder_text): filter_list_placeholder.text(filter_list_placeholder_default_value);
filter_list_container.toggleClass('is-open');
//check if user has clicked a filter already selected
} else if (filter_list_placeholder.data('type') == selected_filter) {
filter_list_placeholder.text($(event.target).text());
filter_list_container.removeClass('is-open');
} else {
//close the dropdown (mobile version) and change placeholder text/data-type value
filter_list_container.removeClass('is-open');
filter_list_placeholder.text($(event.target).text()).data('type', selected_filter);
filter_list_placeholder_text = $(event.target).text();
//add class selected to the selected filter item
filter_values.removeClass('selected');
$(event.target).addClass('selected');
//give higher z-index to the gallery items selected by the filter
show_selected_items(gallery_elements[selected_filter]);
//rotate each item-wrapper of the gallery
//at the end of the animation hide the not-selected items in the gallery amd rotate back the item-wrappers
// fallback added for IE9
var is_explorer_9 = navigator.userAgent.indexOf('MSIE 9') > -1;
if (is_explorer_9) {
hide_not_selected_items(gallery_elements, selected_filter);
gallery_item_wrapper.removeClass('is-switched');
} else {
gallery_item_wrapper.addClass('is-switched').eq(0).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
hide_not_selected_items(gallery_elements, selected_filter);
gallery_item_wrapper.removeClass('is-switched');
});
}
}
});
});
}
});
function show_selected_items(selected_elements) {
selected_elements.addClass('is-selected');
}
function hide_not_selected_items(gallery_containers, filter) {
$.each(gallery_containers, function(key, value) {
if (key != filter) {
$(this).removeClass('is-visible is-selected').addClass('is-hidden');
} else {
$(this).addClass('is-visible').removeClass('is-hidden is-selected');
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I'm assuming by "make it run automatically" you're talking about triggering the content-selection animation programatically, rather than requiring a user click. One possible solution is to assign an id to the selection elements, and then register the click handler directly to those elements, rather than the parent filter_list_container. Then, you can use jQuery's trigger() method to simulate a click on the appropriate element.
Assign an id in the html like this:
<a id="green" href="#0">Green</a>
Then register the click handler like this:
$("#red, #green, #blue").on('click', function(event){ ... }
...and trigger like this:
$("#green").trigger("click");
Here's a JSfiddle with an example.

Toggle box closed if other opens

Can someone help me out with the following code? Can't get it right.
I want it to close opens toggle when clicking on new/other one.
I have this at the moment:
http://jsfiddle.net/78tDj/1/
jQuery(document).ready(function($) {
// Find the toggles and hide their content
$('.toggle').each(function(){
$(this).find('.toggle-content').hide();
});
// When a toggle is clicked (activated) show their content
$('.toggle a.toggle-trigger').click(function(){
var el = $(this), parent = el.closest('.toggle');
if( el.hasClass('active') )
{
parent.find('.toggle-content').slideToggle();
el.removeClass('active');
}
else
{
parent.find('.toggle-content').slideToggle();
el.addClass('active');
}
return false;
});
}); //End

is this what you want to achieve?
jQuery(document).ready(function($) {
// Find the toggles and hide their content
$('.toggle-content').hide();
// When a toggle is clicked (activated) show their content
$('.toggle a.toggle-trigger').click(function(){
var el = $(this), parent = el.closest('.toggle');
$('.toggle-content').hide();
if( el.hasClass('active') )
{
parent.find('.toggle-content').slideToggle();
el.removeClass('active');
}
else
{
parent.find('.toggle-content').slideToggle();
el.addClass('active');
}
return false;
});
}); //End

You need to hide them in your click handler:
$('.toggle a.toggle-trigger').click(function(){
var el = $(this), parent = el.closest('.toggle');
$('.toggle .toggle-content').slideUp(); // <- added this!!!!
//...
jsFiddle

No need to call each, it's redundant. Also, simply hide all toggles before opening a new one ..done :-)
$('.toggle a.toggle-trigger').click(function() {
var el = $(this),
parent = el.closest('.toggle');
$('.toggle .toggle-content').slideUp();
if (!el.hasClass('active')) {
$('.toggle a.toggle-trigger').removeClass('active');
el.addClass('active');
parent.find('.toggle-content').slideDown();
}
else {
el.removeClass('active');
}
});
http://jsfiddle.net/78tDj/10/

Highlight an element within the target element of an anchor?

I'm currently using the following to attempt to highlight an element (div.box) that is inside the targeted element of an anchor (example, section#help). The anchor is used to scroll to #help, but I only need to highlight the div.box that is in the #help.
$(document).ready(function() {
$(".box").removeClass("highlightTarget");
var myLocation = document.location.hash.replace("#","");
if (myLocation) {
document.getElementById(myLocation).className = "highlightTarget";
}
$("a").click(function () {
$(".box").removeClass("highlightTarget");
var clickedLink = this.href.split("#");
if (clickedLink.length > 1) {
document.getElementById(clickedLink[1]).className = "highlightTarget";
}
});
});
Together with the css:
.highlightTarget {background:red}
Currently, my code changes the background of the section#help red. What am I doing wrong?
Any assistance is much appreciated.

what you for is the .box element inside the target element, so you need to use .find() inside the target element to find the .box element.
$("a").click(function () {
$(".box").removeClass("highlightTarget");
var clickedLink = this.href.split("#");
if (clickedLink.length > 1) {
$('#' + clickedLink[1]).find('.box').addClass("highlightTarget")
}
});

$(".box").removeClass("highlightTarget");
var myLocation = document.location.hash.replace("#","");
if (myLocation) {
document.getElementById(myLocation).className = "highlightTarget";
}
$("a").click(function () {
$(".box").removeClass("highlightTarget");
var clickedLink = this.href.split("#");
if (clickedLink.length > 1) {
$('#' + clickedLink[1]).find('.box').addClass('highlightTarget');
}
});

jQuery hover on the same element

With jQuery hover how do you check if you've just hovered on the same element again? Say I have two boxes and hover on box 1, then left, then come back and hover on that same box. I'd like to store the value of the initial hovered element (box 1) and then compare if it's the same when hovering back.
Thanks!!

Try something like below,
var lastHovered = '';
$('#box1').hover(function () {
if (lastHovered == 'box1') {
alert('You have hovered on this already');
}
lastHovered = 'box1';
//Your stuff
}, function () {
//mouse out stuff
});
$('#box2').hover(function () {
if (lastHovered == 'box2') {
alert('You have hovered on this already');
}
lastHovered = 'box2';
//Your stuff
}, function () {
//mouse out stuff
});
Note: I have used 2 functions assuming that box1 hover and box2 hover has totally different functionalities... If not you can have it inside same function and use this.id to group them.. see below.
var lastHovered = '';
$('#box1, #box2').hover(function () {
if (lastHovered == this.id) { //<-- used this.id instead of hard-coded value
alert('You have hovered on ' + this.id + ' already');
}
lastHovered = this.id; //<-- used this.id instead of hard-coded value
//Your stuff
}, function () {
//mouse out stuff
});

Use .data() http://api.jquery.com/data/ so on first hover in the callback do something like
if (!$(this).data('var')) {
$(this).data('var','value');
} else {
console.log($(this).data('var'));
};

var lastHovered = null;
$('#selector1,#selector2,#selector3').hover(function (evt) {
if(lastHovered && lastHovered === $(this).attr("id")){
//code for 're-hovering'
}else{
//code for 'new hover'
}
}, function (evt) {
//mouse out stuff
lastHovered = $(this).attr("id");
});