Develop Reference

Jquery click function for toggle is not working

I have a scenario,where footer must be collapsed based on device.Here,I used toggle class for collapse in mobile device,the toggle click is not working.
JavaScript code:
// Code goes here
$(function() {
$('.footer-links-holder h3').click(function () {
$(this).parent().toggleClass('active');
});
});
Plunker
Any help would be appreciated.
Thanks in Advance.

Just write your JS like this -
$('.footer-links-holder h3').click(function () {
$(this).parent().toggleClass('active');
});
Your updated Plunker

Batter practice is write code in ready function
$(document).ready(function(){
$('.footer-links-holder h3').click(function () {
$(this).parent().toggleClass('active');
});
})

$(function() {
$('.footer-links-holder h3').off().click(function () {
$(this).parent().toggleClass('active');
});
});

onmouseover show/ hide div and can select the text of div

I want to Show and hide one tooltip on hover of an anchor. but tooltip should be there till my cursor on it.
fiddle
$('#showReasonTip').mouseover(function(){
$(this).parent().find('#reasonTip').slideDown()}).mouseout(function(){
$(this).parent().find('#reasonTip').slideUp()
}
)
thanks in advance.

Try
jQuery(function ($) {
$('#showReasonTip').hover(function () {
var $target = $('#reasonTip');
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).slideDown();
}, function () {
var $target = $('#reasonTip');
var timer = setTimeout(function () {
$target.stop(true, true).slideUp();
}, 200);
$target.data('hoverTimer', timer);
});
$($('#reasonTip')).hover(function () {
clearTimeout($(this).data('hoverTimer'));
}, function () {
$(this).stop(true, true).slideUp();
});
});
Demo: Fiddle

You should try using mouseleave instead of mouseout and that too on #reasonTip and not on #showReasonTip.
$('#showReasonTip').mouseover(function(){
$(this).parent().find('#reasonTip').slideDown()
});
$('#reasonTip').mouseleave(function(){
$(this).parent().find('#reasonTip').slideUp()
});
Here's the modified fiddle with a small change in your code.

Add hide parameter to script

hi I currently have the following script and I'm trying to add a show and hide feature to it instead of just having one hide and show it. essentially "click me" shows it and the button hides it, fiddle example
http://jsfiddle.net/9M99G/
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
return false;
});
});

Just do the same with the .below div and slideToggle it with $(this) :
$('.below').on('click', function(){
$(this).slideToggle();
});
demo jsFiddle
See more about slideToggle()

Use slideToggle
$('.below').on('click', function(){
$(this).slideToggle();
});
That will switch display state; if hidden it will show, if shown it will be hidden

If you want just the hide functionality for the button , this code will do
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
return false;
});
$('.below').on('click', function(){
$(this).slideToggle();
});
});
Demo fiddle : http://jsfiddle.net/9M99G/4/
Or if you want to hide the Click Me while the hide button is being displayed the code below does exactly that
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).hide();
$('.below').show();
return false;
});
$('.below').on('click', function () {
$(this).hide();
$('.toggleBtn').show();
return false;
});
});
Demo fiddle : http://jsfiddle.net/9M99G/6/

DEMO
Try this, use slideDown and slideUp
$(document).ready(function () {
$('.below').hide();
$('.toggleBtn').click(function () {
$(this).next('.below').slideDown('slow');
return false;
});
$('.below button').click(function () {
$(".below").slideUp('slow');
});
});

How can I add a transition to the toggle?

I use this to toggle the sidebar:
$(document).ready(function () {
$('.sbt').click(function () {
$('.sidebar').toggle();
});
});
you can see it work here:
http://jsfiddle.net/Jacob_Sell/Ye7wp/
I think the toggle looks to jumpy at the moment, how can I add a transition to make it look smoother?

$(document).ready(function () {
$('.sbt').click(function () {
$('.sidebar').toggle(300);
});
});
Updated DEMO

http://jsfiddle.net/Praveen16oct90/Ye7wp/4/
**$(document).ready(function () {
$('.sbt').click(function () {
$('.sidebar').toggle(2000);
});
});**

Toggle effect not working

hello friends i want to use toggle on <li> when one <li> is open i want rest <li> get close i have tried this http://jsfiddle.net/MbTRD/1/ but its not working as i want
$(function () {
$(".flyout").hide();
$(".flyout").siblings("span").click(function () {
$(this).siblings(".flyout").toggle(500);
});
});
Please help thanks

http://jsfiddle.net/MbTRD/7/ should work
You had to put a $(".flyout").hide(500); in your function
But then you still have to check if you are clicking a open menu or not
like this
$(function () {
$(".flyout").hide();
$(".flyout").siblings("span").click(function () {
if($(this).siblings(".flyout").is(':hidden')){
$(".flyout").hide(500);
}
$(this).siblings(".flyout").toggle(500);
});
});

consider http://docs.jquery.com/UI/Accordion

Like this?
$(function () {
$(".flyout").hide();
$(".flyout").siblings("span").click(function () {
$('.flyout').hide(500);
$(this).siblings(".flyout").toggle(500);
});
});

This should do the trick:
$(function () {
$(".flyout").hide();
$(".flyout").siblings("span").click(function () {
if($(this).siblings(".flyout").is(':hidden'))
{
$(".flyout").hide();
$(this).siblings(".flyout").toggle(500);
}
});
});
Here is a jsfiddle if you want to try it out
​