Develop Reference

suggestion to reduce jQuery code for hide show on click event

In this, I try to do hide and show the div's.
It's working well but I want to reduce this code because it looks like same on click function
$(document).ready(function() {
$(".product_pro").show();
$(".product_retail").hide();
$(".product_food").hide();
$(".product_xclusive").hide();
$(".retail-pro").addClass('pro-active');
$(".retail-pro").click(function() {
$(".product_retail").show();
$(".product_pro").hide();
$(".food-pro").removeClass('pro-active');
$(".xclusive-pro").removeClass('pro-active');
$(".retail-pro").addClass('pro-active');
$(".product_food").hide();
$(".product_xclusive").hide();
});
$(".food-pro").click(function() {
$(".product_retail").hide();
$(".product_food").show();
$(".product_pro").hide();
$(".food-pro").addClass('pro-active');
$(".retail-pro").removeClass('pro-active');
$(".xclusive-pro").removeClass('pro-active');
$(".product_xclusive").hide();
});
});

You can try this:
$(document).ready(function() {
$(".product_pro").show();
$(".product_retail").hide();
$(".product_food").hide();
$(".product_xclusive").hide();
$(".retail-pro").addClass('pro-active');
$(".retail-pro").click(function() {
hideOrDisplayElements(1);
});
$(".food-pro").click(function() {
hideOrDisplayElements(0);
});
});
function hideOrDisplayElements(blnIsRetailProClicked){
$(".product_retail, .product_food")[blnIsRetailProClicked ? 'show' : 'hide']();
$(".food-pro, .retail-pro")[blnIsRetailProClicked ? 'removeClass' : 'addClass']('pro-active');
$(".xclusive-pro").removeClass('pro-active');
$(".product_xclusive .product_pro").hide();
}

The most obvious would be:
$(document).ready(function() {
$(".product_pro").show();
$(".product_retail, .product_food, .product_xclusive").hide();
$(".retail-pro").addClass('pro-active');
$(".retail-pro").click(function() {
$(".product_retail").show();
$(".food-pro, .xclusive-pro").removeClass('pro-active')
$(".retail-pro").addClass('pro-active');
$(".product_food, .product_xclusive, .product_pro").hide();
});
$(".food-pro").click(function() {
$(".product_retail, .product_pro, .product_xclusive").hide();
$(".product_food").show();
$(".food-pro").addClass('pro-active');
$(".retail-pro, .xclusive-pro").removeClass('pro-active');
});
});
But I'd recommend to put a common class in the elements you want hidden or visible in the different states, change the class of the container by state (not each element), and manage everything with css.
Much simpler and cleaner.

jQuery Simple text change on image hover

I'm trying to create a script for changing text on image hover. This is the HTML in simple version:
<section id="#first">
<div class="img-1"></div>
<div class="img-2"></div>
</section>
<section id="#second">
<div class="text-1"></div>
<div class="text-2"></div>
</section>
Javascript
jQuery(document).ready(function($){
$('.img-1').hover(
function(){ $('.text-1').addClass('text-1-active') },
function(){ $('.img-1').addClass('img-1-active') },
function(){ $('.text-2').removeClass('text-2-active') },
function(){ $('.img-2').removeClass('img-2-active') }
)
$('.img-2').hover(
function(){ $('.text-2').addClass('text-2-active') },
function(){ $('.img-2').addClass('img-2-active') },
function(){ $('.img-1').removeClass('img-1-active') },
function(){ $('.text-1').removeClass('text-1-active') }
)
});
Can't change the HTML structure. The classes do get added but don't get removed.
FIDDLE

:) actually this is all you need: DEMO
$("#first [class^=img-]").hover(function() {
$('#second .text-'+ this.className.replace(/\D/g,'')).toggle();
});
If you want to toggle classes? Nothing simpler: DEMO
$("#first [class^=img-]").hover(function() {
$(this).toggleClass("wow");
$('#second .text-'+ this.className.replace(/\D/g,'')).toggleClass("wow");
});
To explain the above, you just need to find out the number of the hovered element and reference-by number the needed .text-N element.
Also this <section id="#first">, that #first is not the way to set an ID to an HTML element.
Use simply <section id="first">

You are attempting to pass four separate callback functions, rather than a single callback that executes all the necessary code.
Here is what you want:
jQuery(document).ready(function($){
$('.img-1').hover(
function(){
$('.text-1').addClass('text-1-active');
$('.img-1').addClass('img-1-active');
$('.text-2').removeClass('text-2-active');
$('.img-2').removeClass('img-2-active');
}
)
$('.img-2').hover(
function(){
$('.text-2').addClass('text-2-active');
$('.img-2').addClass('img-2-active');
$('.img-1').removeClass('img-1-active');
$('.text-1').removeClass('text-1-active');
}
)
});
http://jsfiddle.net/w4mLtec8/5/

first, you use the .hover function wrongly, it should only accept 2 arguments which is for mouseenter and mouseleave. You should be using it like this
$("selector").hover(
function(){
// mouseenter function
},
function(){
// mouseleave function
}
});
and second you don't need to use too long class name to to decide it's active or not, hence you can use it to diferentiate it like this text-1 active and text-2 active, so you can write it like this in jQuery
jQuery(document).ready(function($){
$('.img-1').hover(
function(){ $('.text-1').addClass('active') },
function(){ $('.text-1, .text-2').removeClass('active') }
)
$('.img-2').hover(
function(){ $('.text-2').addClass('active') },
function(){ $('.text-1, .text-2').removeClass('active') }
)
});
and CSS
.text-1,
.text-2{
display:none;
}
.text-1.active,
.text-2.active{
display:block;
}
here's the Updated Fiddle with the optimized way to use it.

I'm making an assumption of what you're looking for...but try this jQuery code:
jQuery(document).ready(function ($) {
$('.img-1').mouseover(function () {
$('.text-1').addClass('text-1-active');
$('.img-1').addClass('img-1-active')
}).mouseout(function () {
$('.text-1').removeClass('text-1-active');
$('.img-1').removeClass('img-1-active');
});
$('.img-2').mouseover(function () {
$('.text-2').addClass('text-2-active');
$('.img-2').addClass('img-2-active')
}).mouseout(function () {
$('.text-2').removeClass('text-2-active');
$('.img-2').removeClass('img-2-active');
});
});

You are handing the hover event a list of functions. Just send it one that does eveything.
I.E.
jQuery(document).ready(function($) {
$('.img-1').hover(
function() {
$('.text-1').addClass('text-1-active');
$('.img-1').addClass('img-1-active');
$('.text-2').removeClass('text-2-active');
$('.img-2').removeClass('img-2-active');
}
);
$('.img-2').hover(
function() {
$('.text-2').addClass('text-2-active');
$('.img-2').addClass('img-2-active');
$('.img-1').removeClass('img-1-active');
$('.text-1').removeClass('text-1-active');
}
);
});

Try this
jQuery(document).ready(function($){
$('.img-1').hover(function(){
$('.text-1').toggleClass('text-1-active');
$('.img-1').toggleClass('img-1-active');
$('.text-2').toggleClass('text-2-active');
$('.img-2').toggleClass('img-2-active');
});
$('.img-2').hover(function(){
$('.text-2').toggleClass('text-2-active');
$('.img-2').toggleClass('img-2-active');
$('.img-1').toggleClass('img-1-active');
$('.text-1').toggleClass('text-1-active');
});
});

jQuery(document).ready(function($){
$('.img-1').hover(
function(){
$('.text-1').toggleClass('text-1-active');
$('.img-1').toggleClass('img-1-active');
}
)
$('.img-2').hover(
function(){
$('.text-2').toggleClass('text-2-active');
$('.img-2').toggleClass('img-2-active');
}
)
});
http://jsfiddle.net/w4mLtec8/10/

If I understand what's to be done, the approach itself used to solve the problem could be better. Basically, use CSS to your advantage. Here, I've reduced the number of times we call JQuery by taking a little time to set up the HTML and CSS.
Tag the corresponding text div with a number
Put the same number in a data attribute so the item to hover knows which text it's associated with
I believe the intent is to have one text hover active at a time, so we can simple remove all 'active'. Naturally, we'd one to restrict the selector here to only pull text hovers, but you get the idea.
//Javascript Code
$('.img').hover( function() {
var name = $(this).attr('data-name');
$('.text').removeClass('active');
$('.text[data-name="'+name+'"]').addClass('active');
});
http://jsfiddle.net/LkL9uo0k/1/

As far as I understand, you don't need classes to show and hide the text, use .show() and .hide() to take care of it, in the original js you're passing 4 functions to the hover event whereas only 2 are needed, one executes when the element is hovered and the second one when mouse exits the element causing hover event to stop.
Here's the modified js, take a look at the fiddle too -
jQuery(document).ready(function($){
$('.img-1').hover(
function(){
$('.text-1').show();
$('.text-2').hide();
},
function(){
$('.text-1, .text-2').hide();
}
);
$('.img-2').hover(
function(){
$('.text-2').show();
$('.text-1').hide();
},
function(){
$('.text-1, .text-2').hide();
}
);
});
FIDDLE
I'm basically hiding both texts on exit, if you want one text block to always stay visible you can hide the other one in hover 'exit' function. Here's the fiddle for that -
http://jsfiddle.net/w4mLtec8/9/

Jquery change the value of dropdown from a dropdown change

I'm trying to change the value of two dropdown lists when a third one changes, to that dropdown's new value:
<script>
$('select[name="d1"]').change(function() {
$('select[name="d2"]').val(this.value);
$('select[name="d3"]').val(this.value);
});
</script>
Nothing happens.

Try this for starters, work your way when you get this to work :)
$(document).ready(function() {
$('select[name="d1"]').change(function() {
$('select[name="d2"]').val(this.value);
$('select[name="d3"]').val(this.value);
});
});

Try like this
$(function() {
$('select[name="d1"]').change(function() {
$('select[name="d2"]').val($(this).val());
$('select[name="d2"]').html($(this).val());
});
});

jQuery Move div into another div

I need to move .link-field-first-ticket-button inside .event-location-one
here's the fiddle: http://jsfiddle.net/ksV73/
It's a cms so I have no choice in the matter.
this is what I'm trying, it's not doing much of anything
$(".widget-upcoming-events-blog li").each( function() {
var links = $(this).children(".link-field-first-ticket-button").html();
$(this).children(".link-field-first-ticket-button").html("");
$(this).children(".event-location-one").append(links);
});

You can just do this:
$(".link-field-first-ticket-button").appendTo(".event-location-one");
It will move the first ticket button to event location

x = $(".widget-upcoming-events-blog").find(".link-field-first-ticket-button").remove()
$(".event-location-one").append(x);

The html method will give you the content inside the element, not the element itself.
Just append the element where you want it. As an element can't exist in two places at once, it will be moved:
$(".widget-upcoming-events-blog li").each( function() {
var links = $(this).children(".link-field-first-ticket-button");
$(this).children(".event-location-one").append(links);
});

try this
$(".widget-upcoming-events-blog li").each( function() {
var links = $(".link-field-first-ticket-button").html();
$(".link-field-first-ticket-button").html("");
$(".event-location-one").append(links);
});

Change your .children() to .find()
$(".widget-upcoming-events-blog li").each( function() {
var links = $(this).find(".link-field-first-ticket-button").html();
$(this).find(".link-field-first-ticket-button").html("");
$(this).find(".event-location-one").append(links);
});

How about use the .appendTo() function?
For example:
$(".widget-upcoming-events-blog li").each( function() {
$(this).find(".link-field-first-ticket-button")
.appendTo( $(this).find(".event-location-one") );
});

How to dynamically add html elements with jquery?

My goal is to have one element on initial load, this element should have id="something_O", when a add link is clicked, underneath already existing element, new, the same html element should be added,not with id="something_o", but with id="something_1", or last element + 1, to be specific. The user should be able to add these elements infinitely. When the user clicks deleted, element should disappear.
Any ideas?
Here is prepared fiddle for easier help...

var counter = 1;
$('.AddEl').live('click', function () {
var el = $('#element_1').clone().attr('id', 'element_' + ++counter).appendTo('body');
});
$('.RemoveEl').live('click', function () {
var el = $(this).parents('.elem')
if (el.get(0).id !== 'element_1') el.remove();
});
Check this here

One means to do this is:
$(document).ready(function() {
$('body').on('click', '.AddEl', function() {
$('.actions:first')
.parent()
.clone()
.attr('id', 'element_' + $('.actions').length)
.insertAfter($('.actions:last').parent());
});
$('body').on('click', '.RemoveEl', function() {
$(this).closest('.actions').parent().remove();
});
});
JS Fiddle demo.
Please note that I've amended your html so that the first element to be cloned is now id="element_0", and targeted that, and all subsequently-created elements, with the CSS selector:
div[id^=element] {
/* css */
}
This could be simplified, but these are simply my first thoughts.
Edited to offer a slightly improved version, in that the initial addition is slightly, or seems a little, more concise, and also features a means to prevent duplicate ids being generated if elements are added/removed:
$(document).ready(function() {
$('body').on('click', '.AddEl', function() {
var $elems = $('.actions').parent();
$elems
.first()
.clone()
.insertAfter($elems.last());
$('div[id^="element_"]').each(
function(i){
$(this).attr('id','element_' + i);
});
});
$('body').on('click', '.RemoveEl', function() {
$(this).closest('.actions').parent().remove();
});
});
JS Fiddle demo.

I just overwrite to your code.
You can try this, may something you want.
http://jsfiddle.net/kongkannika/QeSPP/34/