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);
});
});**
Related
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 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'm fading in and out 3 divs. the fadein and out works great, except the delay is happening after the div is faded out. the code:
runslide();
function runslide() {
$('.expect').fadeIn(1500).delay(7500).fadeOut(2000, function () {
$('.marketing').fadeIn(1500).delay(7500).fadeOut(2000, function () {
$('.consider').fadeIn(1500).delay(7500).fadeOut(1000, function () {
runslide();
});
})
});
}
here is the file I am working on: http://goo.gl/8xt1XZ , it is the slider after the text.
change the code like this
runslide();
function runslide() {
$('.expect').fadeIn(1500).fadeOut(2000, function() {
$('.marketing').fadeIn(1500).fadeOut(2000, function() {
$('.consider').fadeIn(1500).fadeOut(1000, function(){
runslide();
});
})
});
}
DEMO
The delay seems to be working fine. You do have a missing semicolon but I don't think that's the problem. I'm not sure what the problem is on your site. I tried it with jQuery version 1 and 2 and both seems to be working fine.
http://jsfiddle.net/csrow/5t4rL/2/
$('.expect').hide();
$('.marketing').hide();
$('.consider').hide();
runslide();
function runslide() {
$('.expect').fadeIn(1500).delay(7500).fadeOut(2000, function () {
$('.marketing').fadeIn(1500).delay(7500).fadeOut(2000, function () {
$('.consider').fadeIn(1500).delay(7500).fadeOut(1000, function () {
runslide();
});
});
});
}
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');
});
});
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