I made a toggle button with pure CSS/jQuery and all works perfectly. The problem comes when I duplicated it and tried to toggle it. As supposed, the toggles 'toggled' at the same time, here is my code so far:
HTML
<div id="container">
<div id="switch-1"><div class="light-1"></div><div class="switch"><div class="space"><div class="circle"></div></div></div><div class="light-2"></div></div><br><br>
<div id="switch-2"><div class="light-1"></div><div class="switch"><div class="space"><div class="circle"></div></div></div><div class="light-2"></div></div>
</div>
jQuery
$(function(){
$('.space').click(function(){
if($('.circle').hasClass("detector")){
$('.circle').animate({ marginLeft: "2px"}, "slow", function(){$('.light-1').css("background","#8e3135"); $('.light-2').css("background","#adafb2"); $('.circle').removeClass("detector");});
} else {
$('.circle').animate({ marginLeft: "47px"}, "slow", function(){$('.light-1').css("background","#adafb2"); $('.light-2').css("background","#8e3135"); $('.circle').addClass("detector");});
}
});
$('.space').eq(1).click(function(){
if($('.circle').eq(1).hasClass("detector-1")){
$('.circle').eq(1).animate({ marginLeft: "2px"}, "slow", function(){$('.light-1').eq(1).css("background","#8e3135"); $('.light-2').eq(1).css("background","#adafb2"); $('.circle').eq(1).removeClass("detector-1");});
} else {
$('.circle').eq(1).animate({ marginLeft: "47px"}, "slow", function(){$('.light-1').eq(1).css("background","#adafb2"); $('.light-2').eq(1).css("background","#8e3135"); $('.circle').eq(1).addClass("detector-1");});
}
});
});
Or the Jsfiddle:
http://jsfiddle.net/ew0s6nqd/
This is how it works, when you click the toggle it detects if it has a class called "detector". If it doesn't, it animates the toggle and creates one. If it does, that means that the class was previously created so it animates back the toggle and removes the class.
Ok, the problem starts when I duplicate the toggle. I have now two of them which I want to activate individually. The easiest solution was using :eq() jQuery selector or .eq() jQuery function which people classified as a more 'correct' option.
So I add it to the code of the second toggle but it didn't worked. In the fiddle above you can test it by yourself. Please if someone know which is the problems, let me know, thanks!
EDIT: I already used :eq() selector but it didn't work either.
EDIT 2: I use a different detector class called "detector-1" to prevent it from interfering with the other one.
$(function () {
//the click function for every element with the .space class
$('.space').click(function () {
//check on the .circle child of the clicked .space using "this"
if ($('.circle', this).hasClass("detector")) {
//and animate it
$('.circle', this).animate({
marginLeft: "2px"
}, "slow", function () {
// since we are in the animate callback, "this" is now the
// .circle of the clicked .space
// we want the lights to change - so we have to travel the dom upwards
// 1st .parent() brings us to .space
// 2nd .parent() leads us to .switch
// siblings() let us find the .light-1 element
$(this).parent().parent().siblings('.light-1').css("background", "#8e3135");
// same here for light-2
$(this).parent().parent().siblings('.light-2').css("background", "#adafb2");
$(this).removeClass("detector");
});
} else {
$('.circle', this).animate({
marginLeft: "47px"
}, "slow", function () {
$(this).parent().parent().siblings('.light-1').css("background", "#adafb2");
$(this).parent().parent().siblings('.light-2').css("background", "#8e3135");
$(this).addClass("detector");
});
}
});
});
using the this selector, you need to define the click handler only once - and it still works for endless numbers of buttons...
"see working fiddle"
forgot to mention. i changed the css in your fiddle, since the background image didn't show up, i created a white circle via css...
I figured out how to make it thanks to #BhushanKawadkwar
I had to use the :eq() selector on the click function and .eq() function in the other ones. I don't know why, but it works, here's the working fiddle:
http://jsfiddle.net/ew0s6nqd/2/
Related
I got a div element, so when I click on it, another div which is hidden by default is sliding and showing, here is the code for the animation itself:
$('#myelement').click(function(){
$('#another-element').show("slide", { direction: "right" }, 1000);
});
How can I make that so when I click on the #myelement one more time (when the element is showed already) it will hide the #another-element like this:
$('#another-element').hide("slide", { direction: "right" }, 1000);?
So basicly, it should work exactly like a slideToggle but with the show/hide functions. Is that possible?
The toggle-event is deprecated in version 1.8, and removed in version 1.9
Try this...
$('#myelement').toggle(
function () {
$('#another-element').show("slide", {
direction: "right"
}, 1000);
},
function () {
$('#another-element').hide("slide", {
direction: "right"
}, 1000);
});
Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named
.toggle() that toggles the visibility of elements. Whether the
animation or the event method is fired depends on the set of arguments
passed, jQuery docs.
The .toggle() method is provided for convenience. It is relatively
straightforward to implement the same behavior by hand, and this can
be necessary if the assumptions built into .toggle() prove limiting.
For example, .toggle() is not guaranteed to work correctly if applied
twice to the same element. Since .toggle() internally uses a click
handler to do its work, we must unbind click to remove a behavior
attached with .toggle(), so other click handlers can be caught in the
crossfire. The implementation also calls .preventDefault() on the
event, so links will not be followed and buttons will not be clicked
if .toggle() has been called on the element, jQuery docs
You toggle between visibility using show and hide with click. You can put condition on visibility if element is visible then hide else show it. Note you will need jQuery UI to use addition effects with show / hide like direction.
Live Demo
$( "#myelement" ).click(function() {
if($('#another-element:visible').length)
$('#another-element').hide("slide", { direction: "right" }, 1000);
else
$('#another-element').show("slide", { direction: "right" }, 1000);
});
Or, simply use toggle instead of click. By using toggle you wont need a condition (if-else) statement. as suggested by T.J.Crowder.
Live Demo
$( "#myelement" ).click(function() {
$('#another-element').toggle("slide", { direction: "right" }, 1000);
});
Make use of jquery toggle function which do the task for you
.toggle() - Display or hide the matched elements.
$('#myelement').click(function(){
$('#another-element').toggle('slow');
});
this will work for u
$("#button-name").click(function(){
$('#toggle-id').slideToggle('slow');
});
You can use this code for toggle your element
var ele = jQuery("yourelementid");
ele.slideToggle('slow');
this will work for you :)
You can use .toggle() function instead of .click()....
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js</script> <script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>Welcome !!!</p>
<button>Toggle between hide() and show()</button>
</body>
</html>
$(document).ready( function(){
$("button").click(function(){
$("p").toggle(1000,'linear');
});
});
Live Demo
Link: https://jsfiddle.net/nbonne/9hcoy9j8/
I aim is to have the medium blue box and everything in it move up when the search button is pressed.
I know my selector is for "form" and it's trying to change the background, I'm having trouble getting anything to animate.
I think this is the correct way to accomplish it but nothing happens:
$("#search-btn").click(function{
$("controls-main").animate({
background: "red"
}, 500);
})
In the fiddle:
Second click handler was missing parentheses (syntax error in console)
s-form class was missing from your form html code (empty selector)
$('search') is a wrong selector. You probably wanted $('[name=search]');
You are animating background, which jQuery's animate doesn't animate.
Updated working fiddle: https://jsfiddle.net/9hcoy9j8/18/
$(document).ready(function() {
$(".rand-wiki").click(function() {
window.open("https://en.wikipedia.org/wiki/Special:Random");
});
$(".s-form").on('click', function () {
$("[name=search]").animate({
marginTop: '40px'
}, 500);
});
});
jQuery on its own can't animate colors. You need another library like jQuery UI. See this SO answer for more information.
I'm using the bootstrap accordion and want to change the accordion-heading background on click, and it works fine when you have to click to close a accordion-group, but when the accordion-group close automatically when you click another it fails. I'm checking for the "in" class that change automatically.
$( ".accordion-group div" ).click(function() {
if ($(".accordion-group div").hasClass( "in" )) {
$(this).css("width","110%");
} else {
$(this).css("width","80%")
}
});
https://jsfiddle.net/bg250Lhe/
This is somewhat ugly, but it works. You can probably find out what gets passed to the methods and simplify selectors with that.
$('#accordion2').on('hidden.bs.collapse shown.bs.collapse', function () {
$(this).find('.accordion-heading a').removeClass('bigger');
$(this).find('.accordion-body.in').prev('.accordion-heading')
.find('a').addClass('bigger');
});
Demo
I have a button, and what I have is when you click on it, and new element "drops" in. So what I want to do is when you press it again it goes back. As essentially fades out. Here's what I have so far \
$(".icon-search").click(function(){
$(".search").css('height', '100px')
});
When you click on the icon, the black shape goes to 100px. And what I want to do, is get rid of it, by clicking on it again. I've seen other stuff online, but none seemed to work.
Here's a demo http://jsfiddle.net/PHX3A/
JSFiddle
.toggleClass() will do the trick for you.
.toggleClass() :
Add or remove one or more classes from each element in the set of
matched elements, depending on either the class's presence or the
value of the switch argument.
JavaScript :
$(".icon-search").click(function(){
$(".search").toggleClass("doHeight");
});
CSS :
.doHeight{
height:100px;
}
for further information in using .toggleClass() click here
2nd Option :
JSFiddle
using .toggle() reference : toggle
JS :
$( "div" ).click(function() {
$( ".search" ).toggle( "slow" );
});
Use toggleClass function to set the CSS. In this example, I added CSS to the toggle class
Try this:
JQuery:
$(".icon-search").click(function(){
$(".search").toggleClass('toggle')
});
CSS:
.toggle{
height:100px;
}
JSFiddle Demo
I have two buttons which im working with, I am trying to make a hover effect and when the user clicks on the button have a clicked event.
I have been playing around with a few jquery methods such as mouseover mouseout etc but still no luck. The idea is to get the hover to only work on elements that have not been selected already.
The issue with the code below is that once an button has been selected if the user hovers over the selected method it gets rid of its current state.
Is their a way of not getting rid of the current state once a button has been selected?
Thanks
$(".M").click(function(){
$(this).css('background-color','#515B69');
$(this).css('color','#fff');
$(".F").css('color','#515B69');
$(".F").css('background-color','#fff');
});
$(".M").mouseover(function() {
$(this).css('background-color','#515B69');
$(this).css('color','#fff');
});
$('.M').mouseleave(function(){
$(this).css('color','#515B69');
$(this).css('background-color','#fff');
});
$(".F").click(function(){
$(this).css('background-color','#515B69');
$(this).css('color','#fff');
$(".M").css('color','#515B69');
$(".M").css('background-color','#fff');
});
$(".M").mouseover(function() {
$(this).css('background-color','#515B69');
$(this).css('color','#fff');
});
$('.F').mouseleave(function(){
$(this).css('color','#515B69');
$(this).css('background-color','#fff');
});
I would recommend offloading a lot of these tasks with CSS
.M, .F {
background-color: #fff;
color: #515B69;
}
.M.active, .M:hover,
.F.active, .F:hover {
color: #fff;
background-color: #515B69;
}
And for your JS
$('.M, .F').on('click', function () {
$('.M, .F').removeClass('active');
$(this).addClass('active');
});
Set a variable in your click functions and then check it with if statements in your mouseover and mouseleave functions. For example:
var clicked = 0;
$(".F").click(function(){
$(this).css('background-color','#515B69');
$(this).css('color','#fff');
$(".M").css('color','#515B69');
$(".M").css('background-color','#fff');
clicked = 1;
});
if (clicked > 0){
$(".F").mouseover(function() {
$(this).css('background-color','#515B69');
$(this).css('color','#fff');
});
}
I'd prefer to use removeClass and addClass.
If You use removeClass without parameters, all classes will be removed from element. Then add Class, that You want. You can make it that way, for example:
$(selector).removeClass().addClass("your_class");
In that way, styles are seperated from scripts, which is always a good practice.
Try to rewrite Your code in that way. If You have any questions, just ask in a comment, I will update my answer :).
PS. Of course You must place "your_class" in style.css file :).
Best regards