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');
});
});
Related
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
});
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
I have created a Javascript toggle menu:
$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
} else {
$('.toggle').next().slideUp("fast").removeClass("expanded");
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
When I click on another item in the menu, the class "expanded" is not removed from the other elements. I've tried many different things but can't get my head around it. Any help would be appreciated.
$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
$(this).addClass('collapsed');
$(this).removeClass('expanded');
} else {
var $expandedItems = $('.expanded');
$expandedItems.next().slideUp("fast")
$expandedItems.addClass('collapsed');
$expandedItems.removeClass('expanded');
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
Based on your comments I think you are after something like this.
$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
} else {
$('.expanded').removeClass('expanded');//here is your problem
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
This should be remove expanded class from your jquery code
Note Tested although please tell me if its not working
updated
Demo
And for jquery i think you are missing too much information here check demo here Demo
I've created some tabbed content. Is there any way for me to decide which tab I want open by changing the URL? I'm sure I've seen something similar before but can't find it!
I've created a fiddle here: http://jsfiddle.net/sW966/
The default tab is tab 1. But for example, if the URL was http://jsfiddle.net/sW966/#tab-2 the page would load with tab 2 open?
Thanks for any help, struggling a little :)
$(document).ready(function () {
$(".tab").click(function () {
$(".tab").removeClass("active");
$(this).addClass("active");
$("#tabbed-content .tab-content").hide();
$($(this).attr("href")).show();
});
});
Why not change your JS to:
Note this wont work in jsfiddle due to the way it works.
$(document).ready(function () {
if(window.location.hash){
tabChange($('.tab[href=#'+window.location.hash+']'));
}
function tabChange(tab){
$(".tab").removeClass("active");
tab.addClass("active");
$("#tabbed-content .tab-content").hide();
$(tab.attr("href")).show();
}
$(".tab").click(function () {
tabChange($(this));
});
});
You can try this:
Working fiddle here
Replace attribute "href" to "name"..
$(document).ready(function () {
$(".tab").click(function () {
$(".tab").removeClass("active");
$(this).addClass("active");
$("#tabbed-content .tab-content").hide();
$($(this).attr("name")).show();
});
});
Good Luck....
I have this code in html:
<div class="sub-status">
<p class="subscribed"><i class="icon-check"></i> Subscribed</p>
</div>
On hover, I want that to be changed to:
<div class="sub-status">
<p class="unsubscribe"><i>X</i> Unsubscribe</p>
</div>
And, I have this code in jQuery:
$(document).ready(function() {
$('.sub-status').mouseenter(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
});
$('.sub-status').mouseleave(function() {
$('this').html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
});
The first function is working great. When I mouseover that div, it is changed to what I want, but the mouseleave is not working. I want that when I put my mouse out of that div, its data will return to like it was before. I can't get this working. Any help would be appreciated.
Thanks.
Change
$('this')...
to
$(this)...
And you can use hover() instead of using two separate functions:
$('.sub-status').hover(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},function() {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
Updated
Your fiddle isn't working since you are updating the entire content of the hovered element - update just the text in <p> should work.
$('.sub-status').hover(function() {
$(this).children('p')
.removeClass()
.addClass('unsubscribed')
.html("<i>X</i> Unsubscribe");
},function() {
$(this).children('p')
.removeClass()
.addClass('subscribed')
.html("<i class='icon-check'></i> Subscribed");
});
Working fiddle
Here, try this. Working demo: http://jsfiddle.net/XrYj4/3/
$(document).ready(function() {
$('.sub-status').on("mouseenter", function() {
$(this).find("p").prop("class", "unsubscribed").html("<i>X</i> Unsubscribe");
}).on("mouseleave", function() {
$(this).find("p").prop("class", "subscribed").html("<i class='icon-check'></i> Subscribed");
});
});
Try to use a hover function:
$(".sub-status").hover(
function () {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},
function () {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
}
);
http://api.jquery.com/hover/
Change 'this' to simply this. Also consider chaining, shown below, this helps users with weaker devices load stuff faster.
$(document).ready(function() {
$('.sub-status').mouseenter(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
}).mouseleave(function() {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
});