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

JQuery Mobile, load then change possible?

I'm trying to load an external page and insert it in my HTML. Here is my code :
$(document).ready( function() {
$("#idButton").click( function() {
$(":mobile-pagecontainer").pagecontainer("load","file:///url/to/my/HTMLFILE");
$(document).ready( function() {
$(":mobile-pagecontainer").pagecontainer("change","#pageID");
});
});
});
When I execute it, I need to press the button twice before it change my page. How can I fix this ?
Thanks !

you have wrong syntax. Please check if this works for you.
$(document).ready( function() {
$("#idButton").click( function() {
$(":mobile-pagecontainer").pagecontainer("load","file:///url/to/my/HTMLFILE");
$(":mobile-pagecontainer").pagecontainer("change","#pageID");
});
});

Helping to create style similar to accordian - jquery

I am currently implementing a set of tabs similar to the style of an accordian.
This is my code so far...
http://codepen.io/anon/pen/uqBnH
I am having trouble closing the others when one is selected.
My jQuery code...
$(function(){
$('.panel').hide();
$('.mobtabs').click(function(){
$(this).next().toggle();
});
});
Any help would be greatly appreciated.

Just toggle the others shut with:
$(function () {
$('.panel').hide();
$('.mobtabs').click(function () {
$('.mobtabs').not($(this)).next().hide();
$(this).next().toggle();
});
});
jsFiddle example

You can use:
$(function () {
$('.panel').hide();
$('.mobtabs').click(function () {
var nextPanel = $(this).next();
$('.panel').not(nextPanel).hide();
nextPanel.toggle();
});
});
Fiddle Demo

Make the following changes (I added the sliding) -
$('.panel').hide();
$('.mobtabs').click(function(){
$('.mobtabs').not( $(this) ).next().slideUp(); // close them all
$(this).next().slideToggle(); // slide open (or closed if it applies) this tab
});

Accordion Opens But Won't Close

I am using Foundation Accordion and I added a script to have smooth opening and closing. It works but the problem is if you have only one panel you can open it but not close it.
Here is the code used:
$(".accordion").on("click", "dd:not(.active)", function (event) {
$("dd.active").removeClass('active').find(".content").slideUp("slow");
$(this).addClass('active').find(".content").slideToggle("slow");
});
I tried this code but it didn't work:
$("dd.active").on("click", function (event) {
$("dd.active").removeClass('active').find(".content").slideUp("slow");
});
How do I get this to close smoothly?
Here is a jsFiddle
Note: Open the Panel then Try to Close It.

Remove href from <dd><a>.
JS:
$(function () {
$(".accordion").on("click", "dd", function (event) {
if (!($(this).hasClass("active"))) {
$("dd.active").removeClass('active').find(".content").slideUp("fast");
}
$(this).toggleClass('active').find(".content").slideToggle("fast");
})
});
Updated fiddle here.

Can't hide element on click for some reason

I have an element on my website, it looks like so:
<div class="nw_help"><div class="nw_help_content">...</div></div>
Easy stuff. Using CSS on nw_help:hover, nw_help_content becomes visible. In order to support touchscreens too, I have written the following:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).css('visibility', 'hidden');
});
});
The first function works flawlessly, the second one doesn't wanna work at all. I've checked if $('.nw_help_content').css('visibility', 'hidden'); is working in browser's console and it is.
Any ideas?
Thanks so much in advance for your answer.
Edit: Now it hit me: the first function is triggered on clicking nw_help_content as well and it "neutralizes" the second function. But how to prevent it?

I believe if you have the visibility hidden on page render, the element is never rendered. You'll need event delegation:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
$(document).on('click', '.nw_help_content', function() {
$(this).css('visibility', 'hidden');
});
});
Also, only one DOM ready statement is needed.
Demo: http://jsfiddle.net/7sM3L/4/

I suggest staying away from direct CSS rule manipulation on this. Just using jQuery show and hide will provide a more solid/reliable result.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find('.nw_help_content').show();
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).hide();
});
});

It is actually working/ Since the divs are nested you are both events fire and the div is hidden and shown on same click.
use toggle instead.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").toggle();
});
});
Check out the fiddle

As Zenith says, this is due to event bubbling... Another solution is to bind the event only to the outer container and simply check for the visibilty:
$(document).ready(function() {
$('.nw_help').click(function() {
var content = $(this).find('.nw_help_content');
if(content.css('visibility') == 'hidden') {
content.css('visibility','visible');
} else {
content.css('visibility','hidden');
}
});
});