Hey guys I am trying to make a button that will open and close based on if it is clicked the first time - it opens, if the second time - it closes and resets.
Here is my code I have so far - it only opens and wont close:
var val;
$(".confirmed").click(function(){
if (val == 1){
hide();
}
val = 1;
$(".confirmedtable").show();
$(".searchconfirmed").show();
});
function hide(){
$(".confirmedtable").hide();
$(".searchconfirmed").hide();
val = 0;
}
Thanks
You can just use the toggle() function in jquery to do this. See: http://api.jquery.com/toggle/
$('#button').click(function() {
$('#div_to_show_hide').toggle('slow', function() {
// Animation complete.
});
});
The toggle will show an element if it's currently hidden, and hide an element if it's currently shown.
$(".confirmed").click(function(){
$(".confirmedtable, .searchconfirmed").toggle();
});
FIDDLE
As an alternative to the toggle() based answers:
$('.confirmed').click(function(){
$('.confirmedtable, .searchconfirmed')[$('.confirmedtable').is(':visible') ? 'hide' : 'show']();
});
JS Fiddle demo.
It is, though, at best merely an alternative; the toggle() approach is more concise.
Related
I am trying to build basic animation of two divs with jQuery .toggle() function.
The main concept is to toggle the visibility of two additional divs with map and contact form.
I made everything working as I wanted but noticed a bug.
Here is the link to the demo on Codepen -- Link
To see the bug just hit 'Location' then 'Get in touch' and again
'Location'.
I think that it could be fixed with simple if else function, but I can't come up with the right solution since I don't know JS that much.
Anybody, help me, please.
Thanks in advance!
How about something like this. Basically just keeping track of whether the form and map are showing, and only doing the animation when necessary.
$(document).ready(function() {
// toggle map visibility
$("#toggle-map").click(function() {
$(".target-map").toggle('left');
});
// toggle contact form visibility
$("#toggle-form").click(function() {
$(".target-form").toggle('left');
});
var showingMap = false
var showingForm = false
function animate() {
var changeInLeft = !showingMap && !showingForm ? "0px" : "-245px"
$(".left-part").stop().animate({ left: changeInLeft }, 100);
}
// hide one on click
$(document).on("click", "#toggle-map", function(event) {
$(".target-form").hide();
event.preventDefault();
if (showingForm) showingForm = !showingForm;
showingMap = !showingMap;
animate();
});
$(document).on("click", "#toggle-form", function(event) {
$(".target-map").hide();
event.preventDefault();
showingForm = !showingForm;
if (showingMap) showingMap = !showingMap;
animate();
});
});
$(document).ready(function() {
$('#b1').click(function() {
$('#uch').toggle("slow");
});
$('#b2').click(function() {
$('#uch2').toggle("slow");
})
})
I'm not a programmer but somehow managed to make div buttons that opens another div when clicked but I cant manage how to make so that when I click on one button that opens div and then when I click on other button it opens div and hides previous div. I want to integrate it later to joomla template, but as I use jquery and all efforts with if not working maybe someone is clever then me. thanks in advance. I place here working fiddle too.
fiddle example of my buttons
affter some usefull answers i reedited my code and managed to simplify it and added third button , now with extra css class everything seems pretty good but when i click already opened div it reappears as if looping.
edited fiddle
$(document).ready(function() {
$('#b1').click(function() {
$('.bats').hide("slow");
$('#uch').toggle("slow");
});
$('#b2').click(function() {
$('.bats').hide("slow");
$('#uch2').toggle("slow");
});
$('#b3').click(function() {
$('.bats').hide("slow");
$('#uch3').toggle("slow");
});
})
You can call hide('slow') on the other uch element on click of the button. Try this:
$('#b1').click(function() {
$('#uch').toggle("slow");
$('#uch2').hide("slow");
});
$('#b2').click(function() {
$('#uch').hide("slow");
$('#uch2').toggle("slow");
});
Working example
Change ID To Class
$(document).ready(function() {
$('.b1').click(function() {
$('.uch').hide();
$(this).find('.uch').toggle("slow");
});
});
https://jsfiddle.net/u28f6yeL/5/
Here is a working solution for your problem:
change your JQuery code like this:
$(document).ready(function() {
$('#b1').click(function() {
if($('#uch2').css('display') != 'none'){
$('#uch2').toggle("slow");
};
$('#uch').toggle("slow");
});
$('#b2').click(function() {
if($('#uch').css('display') != 'none'){
$('#uch').toggle("slow");
};
$('#uch2').toggle("slow");
});
});
Here's a JSFiddle
you can write a function which close the one is opend! than call them in your click-funktions before toggle the other.
Here's a fiddle :
http://fiddle.jshell.net/ggw6hqsj/1/
Here's my problem (for example) :
When the first button is clicked, the second is hidden.
But I don't know how to make reappear the hidden button when the first button is clicked once again.
Any idea ? Thanks.
$(document).ready(function(){
$('.button1').click(function(){
$('.button2').toggle();
});
});
http://fiddle.jshell.net/ggw6hqsj/3/
The easiest way in your code would be to change
$('.button2').hide();
to
$('.button2').toggle();
for button 1 and 2.
fiddle
Probably the simplest change to your existing code would just be to use .toggle() instead of .hide():
$('.button2').toggle();
You only need to show the clicked button and hide the other one.
try this
function activateButton(num){
var activeButton = ".button" + num;
var otherButton = ".button" + (num === "1" ? "2" : "1");
$(this).toggleClass('active');
$(activeButton).show();
$(otherButton).hide();
}
$(document).ready(function(){
$('.button1').click(activateButton("1"));
$('.button2').click(activateButton("2"));
});
I have the following function:
$('#jaTack').click(function() {
$('#syskon').slideToggle();
$('#jaTack').html('Hide');
});
So #jaTack is an id of a button, when pressed shows the content of id #syskon.
When the button is pressed ,I change the inner html of that button with .html(), from 'Show' to 'Hide'. That's all nice, but i am not sure how i should do when it's pressed once again,
so that the innerhtml of the button becomes 'Show' again?
Hope anyone have the time to help me out.
You need to store the state somewhere, why not an anonymous function?
$('#jaTack').click((function() {
var toggle = false;
return function () {
if (toggle) {
$('#jaTack').html('Show');
} else {
$('#jaTack').html('Hide');
}
$('#syskon').slideToggle();
toggle = !toggle;
};
}()); // immediate invocation because we're awesome
You can use ternary operator ?: like this
$('#jaTack').click(function() {
$('#syskon').slideToggle();
$('#jaTack').html($('#jaTack').html() == "Show" ? "Hide" : "Show");
});
I have two images with which I am using in an anchor tag. I am using jquery toggle on the click event of the anchor tag to swap between images.
$(document).ready(function(){
$('#registrationForm').hide();
$('#callform').append("<a id='formlink'>IMAGE 1</a>");
$("#formlink").click(function(){
$('#registrationForm').toggle(function(){
$('#formlink').empty().append(IMAGE 2);
});
});
});
This works fine the first time around, however i want to toggle between the two images whenever the other is clicked.
Any ideas ?
I'd suggest adding both images initially, but hiding the second image. You can then toggle both images each time the link is clicked without needing to track the state of the images:
$(document).ready(function(){
$('#callform').append("<a id='formlink1' class='formlink'>IMAGE 1</a>");
$('#callform').append("<a id='formlink2' class='formlink' style='display: none;'>IMAGE 2</a>");
$(".formlink").click( function(){
$('#formlink1').toggle();
$('#formlink2').toggle();
});
});
You could just setup a flag when you change to IMAGE1.
selected_image = 'image1'
if(selected_image == 'image1')
toggle to image 2
else
toggle to image 1
Your code is designed to append 'IMAGE 2' after the toggle is complete, and nothing else.
You probably want something like:
$("#formlink").click(function(){
$('#registrationForm').toggle(function(){
var imageToShow = $(this).css('display') == 'none')?'IMAGE 1':'IMAGE 2';
$('#formlink').empty().append(imageToShow);
});
});
$(document).ready(function(){
var i = 0;
$('#registrationForm').hide();
$('#callform').append("<a id='formlink'>IMAGE 1</a>");
$("#formlink").click(function(){
$('#registrationForm').toggle(function(){
if ( ++i % 2 ) {
$('#formlink').empty().append(IMAGE 2);
} else {
$('#formlink').empty().append(IMAGE 1);
}
});
});
});
this is how I toggle an image
$('.accordion').live('click',function() {
if($(this).attr("src").indexOf('closed') == -1){
$(this).attr("src",'img/accordionclosed.gif');
}else{
$(this).("src",'img/accordionopen.gif');
}
});
hth