Develop Reference

Slide up div on click

I want to create an effect similar to the bbc website where the user will click on the title and then a snippet of content will pop up: http://www.bbc.co.uk/
i have looked all over the place and found this snippet
$('.grabPromo').click(function(e){
$('.slideUp').slideToggle();
});
JSFIDDLE
I cannot get it to the opposite though? i want the text to slideup rather then down. Any help would be appreciated. if someone can point me in the right direction either using css or Jquery i would be grateful.
I am using it for the captions on the Slick Carousel in case that helps at all.
What i want before Click:
What i want it to do on Click:

You can use the callback:
$('.grabPromo').click(function(e){
$('.slideUp').slideDown(300 , function() {
$(this).slideUp(300);
});
});
See the fiddle:
http://jsfiddle.net/Sd8rh/858/
In this fiddle you have an example with delay.
Good luck

You can use jquery UI library
$('.grabPromo').click(function(e){
$('.slideUp').toggle("slide", { direction: 'up' });
});
For more information
https://jqueryui.com/effect/

Login slider with jQuery issues

I want to make a login slider with jQuery. You will have a div at the top of your page with a plus image. I want the plus image to be changed into a minus image and the div will slide down. Here is my code but there is a problem.
<script src="_js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("form").hide();
$(".open").click(function() {
$("form").slideDown("slow");
$(".open").addClass("close");
$(".close").removeClass("open");
$(".close").click(function() {
$("form").slideUp("slow");
$(".close").addClass("open");
$(".open").removeClass("close");
});
});
});
</script>
It works once but if you want to slide it down for the second theme it doesn't work anymore.. Can somebody help my please?
tnx!

Working JSFiddle
Try something different like the following:
$('.open').click(function () {
$('form').slideToggle('slow', function () {
$('.open').toggleClass('form-is-open');
});
});
jQuery offers some toggle functions which supply the desired behaviour. This way you don't need two click handlers or keep track of classes yourself. The above code simply adds a class ('form-is-open') to the button, when the form is shown and removes it, when it is hidden.

Fancybox loading on hover

I'm using fancybox 1.3.4 for some images on a website, using the following code:
$(document).ready(function() {
$("a.fancybox").fancybox();
});
For some reason fancybox is loading by bother hover and click - I don't want it to trigger on hover, does anyone know why this is happening? I couldn't find anything in the docs to suggest how to fix this.

Try using this:
$(document).ready(function() {
$("a.fancybox").fancybox().trigger('click');
});
Hope this helps

How to change image on hover with javascript

Hey guys I'm new here and i'm looking to do something on my website, I have a div and I want that when people hover it with mouse it change the image in it into another image.
I found this http://jsfiddle.net/EXNZr/1/ but it's only working when I hover the image, how do I make it change when I hover the div?
Thanks in advance and sorry for broken english
<div id="content"><img id="changeonhover" src="../test/images/yes.png"></div>
this is my code, i want that when people hover on "content" the image in "changeonhover" change into no.gif for example

http://jsfiddle.net/EXNZr/54/
You simply apply the hover event handler to the parent div and change the src of the image tag within using .find();
References:
http://api.jquery.com/find/

Feel compelled to tell you this can be done purely with CSS if you change the <img> tag to <div> with background image

Try this: http://jsfiddle.net/Ry8E4/
$(document).ready(function()
{
$("#theDiv").hover(
function()
{
$("#imgDino").attr("src", "http://www.sitevip.net/gifs/dinosaur/2348_animado.gif");
},
function()
{
$("#imgDino").attr("src", "http://bestuff.com/images/images_of_stuff/64x64crop/t-rex-51807.jpg?1176587870");
}
);
});​

$(document).ready(function() {
$("#content").hover(
function()
{
$('#changeonhover', this).attr("src", "http://www.sitevip.net/gifs/dinosaur/2348_animado.gif");
},
function()
{
$('#changeonhover', this).attr("src", "http://bestuff.com/images/images_of_stuff/64x64crop/t-rex-51807.jpg?1176587870");
}
);
});
Call event on #content and not on #changehover.

jQuery Toggle Problem

What I'm trying to accomplish seems quite simple however, I'm not great at jQuery.
I did try to get as close as possible to a solution but whenever I click on the anchor tag twice, everything disappears. Obviously I'm doing something wrong.
I would like .slider1 to be visible by default and .slider2 to be hidden.
Also, when the anchor "Fader" is clicked, .slider1 is hidden.
http://jsfiddle.net/GQJxv/
Help anyone?

I have fixed up the code for you:
http://jsfiddle.net/ZAPwD/

Something like this?
$(".slider1").fadeIn("fast");
$("a.slider").click(function() {
$(".slider2").fadeOut("fast", function(){
$(".slider1").fadeIn("fast");
});
});
$("a.fader").click(function() {
$(".slider1").fadeOut("fast", function(){
$(".slider2").fadeIn("fast");
});
});
This looks like it cross fades pretty nicely:
http://martin-fleming.co.uk/examples/jquery-crossfade/