I have a pretty simple jQuery slidedown login. My only problem is that I would like it to not "restart" / go back up when a link anywhere on the site is clicked and/or page is refreshed, not until the user clicks the close button.
Not sure if this is possible.
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown(2000, "easeOutBounce");
});
// Expand Panel
$("#open").click(function(){
$("body").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp(2000, "easeInBack");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
You may create a cookie once it slides down and on every $(document).ready() call see if that cookie is there or not and open the panel accordingly.
You can either google "how to set a cookie with javascript" or use $.cookie as suggested by Konstantin D.
See my comments in your code to understand clearly:
$(document).ready(function() {
// see if cookie exists. if it does do the following
// $('div#panel').show();
// if it does not, you don't have to do anything
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown(2000, "easeOutBounce");
// now that it is opened, you should set your cookie here!
});
// Expand Panel
$("#open").click(function(){
$("body").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp(2000, "easeInBack");
// once it is closed by user, remember to delete the cookie.
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
In order to persist a state in your client UI you would want to use some local storage like cookies. Take a look at the jQuery cookie plugin.
You would add a check to see whether the cookie exists and if it does display the panel expanded.
code:
if ($.cookie("isExpanded")) {
$("div#panel").css('display', 'block');
}
I would do something like this:
$(document).ready(function() {
if(loginOpen == true)
$("div#panel").show();
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown(2000, "easeOutBounce");
$("body").slideDown("slow");
loginOpen = true;
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp(2000, "easeInBack");
loginOpen = false;
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
var loginOpen = false;
Related
I'm trying to remember which tabs were open in my menu after reload. Here's my js:
$(document).ready(function () {
$(".sidebar div").hide();
$(".sidebar li a").click(function () {
// alert($(this).attr("class"));
var myClass=$(this).attr("class");
if ($("#div"+myClass).attr("class")!='active') {
$("#div"+myClass).slideToggle(); //open tab
$("#div"+myClass).addClass('active');
}
else {
$("#div"+myClass).slideToggle(); //close tab
$("#div"+myClass).removeClass('active');
}
});
});
It's constantly adding and taking away the class "active" each time I click on it. I also have this right below it:
$(window).load(function () {
$(".active").slideToggle();
});
Whenever I reload my page, even when a couple of tabs have an active class, they do not appear to be slideToggling. Am I doing this wrong? Is there an easy way around this?
I'd like to change the button to read Close when clicked and also to act as a Close too.
Fiddle Demo
How do I achieve this with my current code?
jQuery:
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Switch visiblility of the "Close Panel" button
$("#close").click(function () {
$("div#panel").slideUp("slow");
});
});
You can use .is(':visible') to check whether div is visible and set text appropriately.
code
$("#open").click(function () {
$("div#panel").slideToggle("slow", function () {
if ($("div#panel").is(':visible')) {
$("#open").text('Close');
} else {
$("#open").text('Quick Quote');
}
});
});
DEMO
You can simply achieve this using .slideToggle():
$("#open").click(function(){
if($("div#panel").is(':visible'))
$(this).html('Quick Quote');
else
$(this).html('Close Quote');
$("div#panel").slideToggle("slow");
});
Working Demo
Using SlideToggle is a neat solution.
You can also achieve the functionality using addClass and removeClass. Without making much changes to the code that you have written.
http://jsfiddle.net/4dkoke6w/
I have created a class "hidden" and it applies "display: none" styling.
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
$("#open").addClass("hidden");
$("#close").removeClass("hidden");
});
// Switch visiblility of the "Close Panel" button
$("#close").click(function () {
$("div#panel").slideUp("slow");
$("#close").addClass("hidden");
$("#open").removeClass("hidden");
});
I have a responsive accordion function inside a website and i want to (open) and (close) all content with one button that also change his content name to (open) when all content is closed and (closed) when all content is open.
Also now the content that already was opened closes again when using the (open) button and the plus and minus icons don't react the right way showing the (minus icon) when the content is closed and visa versa.
Here is the fiddle
Can someone help me with this?
// Accordion //
$('.header').click(function(){
$('.content',$(this).parent()).slideToggle();
$(this).toggleClass('active');
})
$('.toggle-btn').click(function(){
$('.content').slideToggle();
$(this).toggleClass('active');
})
There you go:
http://jsfiddle.net/w3srayj6/21/
// Accordion //
$(document).ready(function() {
$('.header').click(function(){
$('.content',$(this).parent()).slideToggle();
$(this).toggleClass('active');
$('.toggle-btn').addClass('active').trigger("change");
})
});
$(document).ready(function() {
$('.toggle-btn').change(function(){
var headers = $('.header');
var state = 'open';
$.each(headers,function(){
if($(this).hasClass('active'))
state = 'close';
});
if(state == 'open')
$(this).addClass('active')
$(this).text(state);
});
$('.toggle-btn').click(function(){
var current = $(this);
current.toggleClass('active');
current.trigger("change");
var contents = $('.content');
$.each(contents, function(){
if(!current.hasClass('active'))
$(this).slideUp();
else
$(this).slideDown();
});
var headers = $('.header');
$.each(headers, function(){
if(current.hasClass('active'))
$(this).addClass('active');
else
$(this).removeClass('active');
});
current.trigger("change");
})
});
// Read more //
$(window).scroll(function() {
if ($(this).scrollTop() < 20) {
$('.read-more').slideDown(200);
} else {
console.log('there');
$('.read-more').slideUp(200);
}
});
Sometimes working with toggles may be a bit tricky and confusing.
In this case I used "hasClass" in order to determine if items are already open or not.
Since we have only "opened" and "closed" states, we can say that as long that "open" is not "Active" (has class active on it), we should add the "active" class flag to all headers and contents. same in the opposite situation.
this makes sure that already toggled items are not re-toggled.
To change your minus/plus icone with your button, you must select specific .header class with parent() and child() jQuery method like this :
$('.toggle-btn').click(function(){
$('.content').each( function() {
$(this).slideToggle();
$(this).parent().find('.header').toggleClass('active');
});
});
If you check for the class active after the toggle occurs, you can then change the text of the button depending on if the toggled class is active or not.
See this updated fiddle (edited to change the icons also)
I have a question concerning collapsing/expanding a footer. I have a simple basic collapse/expand script going, where when the "Open" button is clicked, the hidden footer slides up and when you click "Close" it slides back down and hides again. Now, I want to attach an instance where I can click anywhere on teh DOM when the footer is open and it will close.
This is the script:
$(document).ready(function () {
// Expand Panel
$("#footerOpen").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideDown("slow");
});
// Collapse Panel
$("#footerClose").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
Thanks
$(document).ready(function () {
// Expand Panel
$("#footerOpen").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideDown("slow");
});
// Collapse Panel
$("#footerClose").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
// click anywhere on teh DOM when the footer is open and it will close.
$("body:not(#footerClose)").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideUp("slow");
});
});
try this one, im using jquery not selector.
Attach a click handler to the document, and do the slideUp in there. You can use the event.target to determine whether or not to perform the slideUp:
$(document).on('click', function(e) {
// Don't slideUp if #footerOpen or #footerPanel are clicked
if ($(e.target).is('#footerOpen, #footerPanel')) {
return;
}
// Do the slideUp!
$('#footerPanel').slideUp('slow');
});
Here's a fiddle
If you have other elements within your #footerPanel, the above probably won't work as the target will likely be something other than #footerPanel, the best thing to do would be to add a click handler to #footerPanel, and prevent the event from propagating and triggering the above click handler:
$('#footerPanel').on('click', function(e) {
e.stopPropagation();
});
Here's another fiddle
Try this it worked for me...
$(document).click(function(event) {
var $target = $(event.target);
if(!$target.is("#footerPanel")){
$("#footerPanel").slideUp('slow');
}
});
The problem:
In the example provided below, I have a sidenav with options, you click to reveal a toggled div. If you click the third item in the menu "Dolar", you will see you get a dropdown with three options appear below the link.
This is great, but I want the dropdown to close when I click on the other links. I'm not sure how to achieve this.
jsFiddle:
http://jsfiddle.net/visualdecree/4A23Z/39/
jQuery:
Note: I know it might be messy, I'm still learning this.
$('.sn a, .sn-alt a').on('click',function(){ // Sidenav panel script
var panID = $("#" + $(this).data('panel') );
$("div[id*='sn-pan-']")
.stop()
.hide({width:'toggle'},400);
$(panID)
.css({'left' : '139px','overflow':'visible'})
.stop()
.animate
({ width: "toggle", opacity: "toggle"
}, { duration: "slow" });
$(".control-view").hide(); // Fadein menu close button
$(".control-view").not(":visible").stop().delay(400).fadeTo("fast", 0.33);
});
$('.sn, .sn-drop').click(function(e) {
$('ul.sidenav li').not(this).removeClass('active'); // Active class removal / add
$(this).stop(true, true).toggleClass("active");
});
$('.sn-alt').click(function(e) {
$('ul.additional li').not(this).removeClass('active'); // Active class removal / add
$(this).stop(true, true).toggleClass("active");
});
$(".control-view").hover( // Hover effect for menu close button
function () {
$(".control-view").stop().hide().fadeTo("fast", 1); // Hover in
},
function () {
$(".control-view").fadeTo("normal",0.33); // Fade back to previous set opacity
});
$('.control-view').click(function(e) {
$("div[id*='sn-pan-']")
.stop(true,true)
.hide({width:'toggle'}, 100);
$('ul.sidenav li').not(this).removeClass('active');
$(".control-view").stop().fadeOut("fast");
});
$(".additional").hide(); // Controls for the 'design' dropdown
$(".sn-drop").click(function(){
$(".additional").slideToggle(300);
var scrt_var = Math.random();
return false; //Prevent the browser jump to the link anchor
});
Just add this JQuery, when you click on other link in your sidebar, it will close your .additional
$(".sn").click(function(){
$(".additional").slideUp(300);
var scrt_var = Math.random();
return false; //Prevent the browser jump to the link anchor
});
If it's just the links in the left that you want to be the trigger to close the dropdown then you can do it simply with this:
$('.sn').click(function(){
$('.additional').slideUp();
})