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");
});
Related
I have this code:
$(function(){
$("#modal-launcher, #modal-background, #modal-close").click(function () {
$("#modal-content,#modal-background").toggle("slow");
return false;
});
});
and this html:
<button id='modal-launcher'>
Launch Modal Window
</button>
<div id='modal-background'></div>
<div id='modal-content'>
<button id='modal-close'>Close Modal Window</button>
</div>
Here's a JSFiddle.
Right now, the modal appears in the center when you click the button. Instead, I'd like to have a animation where the modal appears to come from the button "Launch Modal Window" button, and then goes to the center. Is this possible? I'm looking for an example on the web, but I can't find one now, but I'll keep looking.
Is this possible? Thanks for all help!
I guess it depends how much or how little work you want to invest on it, jQuery UI has a default effect for this very scenario, the option is called 'transfer', check it out at
http://jqueryui.com/effect/
If jQuery UI is not an option, you can use the buttons http://api.jquery.com/offset/ as the initial/final position for the dialog and animate the opacity, left and top properties of the dialog.
$(function(){
$("#modal-launcher, #modal-background, #modal-close").click(function () {
$("#modal-content,#modal-background").show().animate({height: "10px", width: "10px"}, 500);
return false;
});
});
Try something like this :
$(function(){
$("#modal-launcher, #modal-background, #modal-close").click(function () {
$("#modal-content,#modal-background").toggle(function(){
$("#modal-content,#modal-background").animate({}, 1500 );
});
return false;
});
});
Use animate function to give effects. Check the working demo.
For more info about animate click here:http://api.jquery.com/animate/
Check the demo:http://jsfiddle.net/JRfA5/3/
Try this code :
The Fiddle is http://jsfiddle.net/JRfA5/4/
http://jsfiddle.net/JRfA5/5/
$(function(){
$("#modal-launcher, #modal-background, #modal-close").click(function () {
$("#modal-content,#modal-background").toggle(function() {
$(this).animate({height: '800'});
});
return false;
});
});
I want to use jQuery to fade in a div when an image is clicked, when the image is clicked again, I want it to hide and so on.
How would I do this?
I basically need a toggle switch.
$('#my_img_selector').click(function(){$('#my_div_selector').fadeToggle()});
Try it out here.
Try also slideToggle() and toggle() in place of fadeToggle().
You have to change the selectors $('#fadeMe') and $('#bindImage') according to your markup. The magic is here
$(document).ready(function(){
$('#bindImage').on('click', function(){
$('#fadeMe').fadeToggle();
//return false; // only useful if you trigger an
});
});
$('#yourimage').on('click', function(event){
if ($("#something").is(':visible')) {
$(".something").hide("drop", {
direction: "up"
}, 2000);
}else{
$(".something").show("drop", {
direction: "up"
}, 2000);
}
});
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;
I have a little blog with some social buttons for sharing that are integrated into my theme.
Now I want to change show/hide so that it is shown by default and hidden when clicked.
$(document).ready(function() {
$(".post-share").hide();
$("a.share-btn").click(function() {
$(this).prev(".post-share").slideToggle("slow");
});
});
Can anyone help?
$(document).ready(function() {
$(".post-share").show();
$("a.share-btn").click(function() {
$(this).prev(".post-share").slideToggle("slow");
});
});
change the hide to show in dom ready
$(document).ready(function() {
$(".post-share").show();
$("a.share-btn").click(function() {
$(this).prev(".post-share").slideToggle("slow");
});
});
If you want it to show by default and then hide when clicked...
$(document).ready(function() {
$(".post-share").show();
$("a.share-btn").click(function() {
$(this).prev(".post-share").slideUp("slow");
});
});
I currently have the following code:
$(function(){
$('#btn_signIn').click(function(){
$('#div_signInBox').toggle("fast");
});
});
I need to hide the div_signInBox toggled div anytime any other part of the window is clicked...
Thanks!
Is this what you want?
$(function() {
$('#div_signInBox,html').click(function() {
if ($(this).is('#div_signInBox'))
return false;
$('#div_signInBox').toggle("fast");
});
});