Develop Reference

adding tab dropdown on slide up and down div on click

This drop down div is view after click packages and i want to add when select choose your destination change the icon set. i tried but when click drop down item on list main div slide up...
my jquery code is below
//SLIDE UP AND DOWN FUNCTION
$('li.dropdown-packages a').on('click', function(e){
e.preventDefault();
e.stopPropagation();
var $packages = $('.custom-packages');
if($packages.is(":visible")){
$packages.slideUp(350);
setTimeout(function () {
$('li.dropdown-packages').removeClass('dwn-arrow');
}, 800);
}
if($packages.is(":hidden")){
$packages.slideDown(350);
setTimeout(function () {
$('li.dropdown-packages').addClass('dwn-arrow');
},800);
}
});

Use the slideToggle() method.
$('li.dropdown-packages a').on('click', function(e){
e.preventDefault();
e.stopPropagation();
var $packages = $('.custom-packages');
$packages.slideToggle();
});

CSS: Failing to display unless refreshed - Navigation bar

I have been working on navigation bar and the strangest issue is occurring.
Please use the JSFiddle link to see what I mean.
To duplicate the error:
Run the code when the desktop view is active i.e. when the navigation links are in a line.
Then resize the screen till the "click me" is displayed.
Then press it.
Now run the code while you see the "click me" and press it again.
JS information
jQuery(document).ready(function($) {
// UserCP
$('.rotate').on('click', function() {
$(this).toggleClass("down");
});
$('.nav-start').on('click', function() {
$("#nav2").removeClass("hidden");
$('#nav2 li a').stop().slideToggle('100');
return false;
});
$(document).ready(function() {
$('#nav2 li a').stop().slideToggle('100');
});
$('body').on('click', function() {
$('#nav2 li a').stop().slideUp('100');
});
$("#nav2 li a").click(function(e) {
e.stopPropagation();
});
$(document).click(function(event) {
if (!$(event.target).closest('#nav2 li a').length) {
if ($('#nav2 li a').is(":visible")) {
$('html, body').on('click', function() {
$('#nav2 li a').stop().slideUp('100');
});
};
};
});
});
FIXED - UPDATED JSFiddle! Thanks #Louys Patrice Bessette #Titus #Rick

You are using two click events on this "Click me" li...
(One on .navstart and one on .rotate)
It may not be an issue, but this make the code harder to read.
Then, when you slideToggle(), if you want the submenu to slide down, it has to be hidden.
Because, since you remove the hidden class (probably usefull on load), the submenu is visible.
A Toggle hides it.
I simplified your script to this.
Have a look at this updated Fiddle.
$(document).ready(function() {
// Show submenu on "Click me"
$('.nav-start').on('click', function() {
$('.rotate').toggleClass("down");
$("#nav2").removeClass("hidden");
var subNav = $('#nav2 li a');
if(subNav.css("display")=="block"){
subNav.stop().slideUp('100');
}else{
subNav.stop().slideDown('100');
}
return false;
});
$("#nav2 li a").click(function(e) {
e.stopPropagation();
});
// Hide submenu on document click
$(document).click(function(event) {
if (!$(event.target).closest('#nav2 li a').length && $('#nav2 li a').is(":visible")) {
$('#nav2 li a').stop().slideUp('100');
};
});
});

Adding and removing click/hover event handlers jQuery

Run into issues mixing click and hover events.
Clicking an inactive li a element toggles an active class and binds a hover event.
Hovering over now active element displays a previously hidden block (span.rate)
Clicking the hovered element is supposed to hide it, remove hover event and toggle the active class on the parent so it is no longer 'active'.
Clicking the hovered event does not remove the events and toggle active. There is some other logic in there regarding mutually exclusive options, this all works fine though.
jsfiddle of how it all sits together:
http://jsfiddle.net/65yY3/15/
Current js:
ps = {
psToggle: 0,
init: function () {
$(document).ready(function () {
$('.example li a)').on('click', function(e) {
e.preventDefault();
var that = $(this);
if (that.parent().hasClass('paired')) {
if (rm.psToggle === 0) {
that.toggleClass('active');
that.find('.rate').fadeToggle(50);
rm.psToggle = 1;
} else {
if (that.hasClass('active')) {
that.toggleClass('active');
that.find('.rate').fadeToggle(50);
rm.psToggle = 0;
} else {
$('.paired a').toggleClass('active');
that.find('.rate').fadeToggle(50);
//Call message function
}
}
rm.pControl();
} else {
that.toggleClass('active');
that.find('.rate').fadeToggle(50);
rm.pControl();
}
});
});
},
pControl: function () {
//Unbind events to all control items excluding 1st item.
$('.example li a').off('hover');
$('.example li a .rate').off('click');
$('.example .active').each(function(i) {
$(this).on('hover', function() {
$(this).find('.rate').fadeToggle(50);
});
});
$('.example li a.active .rate').on('click', function() {
//Remove hover/hide and toggle active state
$(this).off('hover');
$(this).hide();
$(this).parent().toggleClass('active');
rm.pControl(); //rebind new active classes
});
}
};
ps.init();

Check the below demos.
Both the click events were getting fired as ,.rate is the child of a.
$('.example li a.active .rate').on('click'... and
$('.example li a').on('click'...
So you can either remove the click on .rate. Demo1
Or add e.stopPropagation(); to the child to stop event bubbling from parent to child. Demo2
$('.example li a.active .rate').on('click', function(e) {
e.stopPropagation();
//Remove hover/hide and toggle active state
$(this).off('hover');
$(this).hide();
$(this).parent().toggleClass('active');
ps.pControl(); //rebind new active classes
});

enter link description hereCorrect
$('.example li a') instead of $('.example li a)')
update here is the link

Hide DIV after click (jQuery)

I have a list item that displays a hidden div once its clicked. I want to be able to hide the div if the list item is click on again. How can I do this?
$(function () {
"use strict";
function resetTabs() {
$("#sub_content > div").hide(); //Hide all content
$("#tabs a").removeClass("current"); //Reset id's
}
$("#sub_content > div").hide(); // Initially hide all content
$("#tabs a").on("click", function (e) {
e.preventDefault();
resetTabs();
$(this).addClass("current"); // Activate this
$($(this).attr('name')).fadeIn(); // Show content for current tab
});
});
http://jsfiddle.net/E9mPw/
Thanks.

You can use fadeToggle()
$($(this).attr('name')).fadeToggle();
http://jsfiddle.net/E9mPw/2/

you just can add "if" statement, if you just want to fix your script
$("#tabs a").on("click", function (e) {
e.preventDefault();
if($(this).hasClass('current')){
resetTabs();
}
else{
resetTabs();
$(this).addClass("current"); // Activate this
$($(this).attr('name')).fadeIn(); // Show content for current tab
}
});
http://jsfiddle.net/E9mPw/7/

You can use toggle jquery properties.
$("#tabs a").on("click", function (e) {
e.preventDefault();
resetTabs();
$(this).toggle("current");
});
You chould check this links

You can check if the a has the class current and fade it out accordingly:
$("#tabs a").on("click", function (e) {
e.preventDefault();
//resetTabs();
if($(this).hasClass("current"))
{
$(this).removeClass("current");
$($(this).attr('name')).fadeOut(); // Hide content for current tab
}
else
{
$(this).addClass("current"); // Activate this
$($(this).attr('name')).fadeIn(); // Show content for current tab
}
});
JSFiddle

Can we use same jquery functionality twice once on hover and another on click?

I have main menu which contain 6 element or main categories - when we hover over these main menus then we can see their sub menus or categories.
http://newiagadvisors.advisorproducts.com/home
My Requirement is like this way:
it’s possible to have the sub-menus or categories appear as choices when someone clicks on the pictures as well - in the same way while hovering over main menu we see their sub categories or menus?
I want same menu hover functionality on click event when someone click on picture
Below is the jquery code for main menu dropdown on hover event:
$(function()
{
$("ul.dropdown li").hover(function()
{
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}, function()
{
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
});
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});

Try something like this:
var images = $('#banner img'),
menuItems = $('.dropdown.sub-menu > li');
images.click(function(){
var index = images.index(this);
var li = menuItems.eq(index),
sublist = li.find('ul:first');
if(sublist.length)
{
li.addClass("hover");
sublist.css('visibility', 'visible').show();
}
});

You can add the same function for different Even listeners there will not be any problem.

Use bind(), however bind isn't compatible with hover, so you can use mouseenter and mouseleave instead. Note that hover is a shortcut for those two handlers.
$("ul.dropdown li").bind( {
'mouseenter' : function(){
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
},
'mouseleave': function()
{
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
},
'click': function()
{
if( $(this).hasClass("hover") ){
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
} else {
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}
}
});

Bind the navigation li with on mouseenter and on mouseleave (that is what the hover() is doing behind the scenes anyway):
$("ul.dropdown li").on('mouseenter', function() {
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}).on('mouseleave', function() {
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
});
Then you will have to connect the two somehow (ie. the img and the navigation li), let's say you have an id attribute on both, the li for instance having id="news-info" and the corresponding picture (the img tag) having id="img-news-info. Then you can bind the click of the picture with:
$("#banner img").on('click', function() {
var navId = $(this).attr('id').substring(4);
$("#"+navId+"").mouseenter();
});