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');
});
});

I'm using this code for toggle. How to create multiple toggle using this code

$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').toggle(function () {
$(".slidingDiv").slideDown(
function () {
$("#plus").text("Hide responses")
}
);
}, function () {
$(".slidingDiv").slideUp(
function () {
$("#plus").text("Show responses")
}
);
});
});
Write a responses
Show responses
<div class="slidingDiv">Test Here </div>
Write a responses
Show responses
<div class="slidingDiv">Test Here </div>

Since id must be unique, you need to use class instead:
Write a responses
Show responses
<div class="slidingDiv">Test Here</div>
Write a responses
Show responses
<div class="slidingDiv">Test Here</div>
then you can do:
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').toggle(function () {
$(this).next().slideDown(
function () {
$(this).prev().text("Hide responses")
});
}, function () {
$(this).next().slideUp(
function () {
$(this).prev().text("Show responses")
});
});
});
Fiddle Demo

JQuery slide effects on drop down menu

I created jquery dropdown menu like this. I want to add slide effect on drop down menu. At the same time if I am placing my mouse over my menu tab the sub menu was opened now it is looking like one step up compare to the menu tab. I need slide like this. I here added my script.
function mainmenu() {
jQuery(" #na1").hover(function () {
//alert("hai-2");
jQuery(this).find('#content1').slideDown("fast");
}, function () {
jQuery(this).find('#content1').slideUp("fast");
});
}
$(document).ready(function () {
mainmenu();
});
Thanks in advance

$(document).ready(function () {
$("#na ul li").hover(function () {
$(this).siblings().find('ul').slideUp(400);
$(this).find('ul').slideDown(400);
}, function () {
$(this).find('ul').slideUp(400);
});
});
Demo:
http://jsfiddle.net/QkbDg/1/

Try this
$(document).ready(function () {
jQuery("#na ul li a").hover(function () {
jQuery(this).next('ul').slideDown(350);
}, function () {
jQuery(this).next('ul').slideUp(350);
});
});
DEMO

Try this:
function mainmenu(){
jQuery(" #na1").hover(function(){
jQuery(this).find('#content1').stop().slideDown("fast");
},function(){
jQuery(this).find('#content1').stop().slideUp("fast");
});
}
$(document).ready(function()
{
mainmenu();
});

Try this
function mainmenu(){
jQuery(".topm").hover(function(){
//alert("hai-2");
jQuery(this).find('.content').stop().slideDown("fast")
},function(){
jQuery(this).find('.content').stop().slideUp("fast");
});
}
$(document).ready(function()
{
mainmenu();
});
Demo : here

Toggle up all elements if were open

For this markup:
<div id="citate">Citate</div>
<div id="unu" hidden>Autori</div>
<div id="autori" hidden>
<ul>
<li>Ion Creanga</li>
<li>Ion Creanga</li>
<li>Ion Creanga</li>
<li>Ion Creanga</li>
</ul>
</div>
<div id="doi" hidden>Subiecte</div>
<div id="subiecte" hidden>
<ul>
<li>Creanga</li>
<li>Creanga</li>
<li>Creanga</li>
<li>Creanga</li>
</ul>
</div>
I have this code JS :
$(document).ready(function () {
$("div#citate").click(function () {
$("div#unu ").slideToggle();
});
});
$(document).ready(function () {
$("div#citate").click(function () {
$("div#doi ").slideToggle();
});
});
$(document).ready(function () {
$("div#unu").click(function () {
$("div#autori").slideToggle();
});
});
$(document).ready(function () {
$("div#doi").click(function () {
$("div#subiecte").slideToggle();
});
});
and i want when i click second time on "Citate" it will toogleup all other elements from toogledown "Autori" and "Subiecte" if there were open. I try to do it, I searched how to but can not do it right.
I used slideToggle() function.

This can help you.
$("div#citate").click(function(){
if( $('div#autori, div#subiecte').is(':visible') ){
$("div#unu, div#doi,div#autori, div#subiecte").slideUp();
}
});
Fiddle Demo
No need to add $(document).ready again and agian

Its Working use callback : See DEMO

This is not a optimal solution as it does not scale at all, but it works. If you toggle the parent (#citate) and your submenus are visible, then close them by using slideToggle or slideUp.
$(document).ready(function(){
$("div#citate").click(function(){
$("div#unu").slideToggle();
$("div#doi").slideToggle();
if($("div#autori").is(":visible")) {
$("div#autori").slideToggle();
}
if($("div#subiecte").is(":visible")) {
$("div#subiecte").slideToggle();
}
});
$("div#unu").click(function(){
$("div#autori").slideToggle();
});
$("div#doi").click(function(){
$("div#subiecte").slideToggle();
});
});

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);
});
});**