I'm trying to make a button which on one click it changes it's color, and on another click it returns to it's original form.
something like clicked and unclicked.
I added a JSfiddle for you to look at it.
https://jsfiddle.net/dw5y5xLx/3/
$('.genM').click(function() {
$('.genM').removeClass('selected');
$(this).addClass('selected');
});
thanks!
also, is there a way doing that by only using CSS HTML?
Thanks.
$('.genM').click(function() {
$(this).toggleClass('selected');
});
I have updated the js fiddle for you, please check (https://jsfiddle.net/dw5y5xLx/15/)!
jQuery hasClass function can be helpful
$('.genM').click(function() {
if($(this).hasClass('selected')){
$(this).removeClass('selected');
}else{
$(this).addClass('selected');
}
});
IDEA:
Is there a way doing that by only using CSS HTML?
Yes, there is a way how u could achieve that just by pure CSS and HTML. But, if you dont want to use js, you must have an HTML element that is able to keep the "pressed" or "unpressed" state all by itself, without js.
However, there is no such an HTML element, so you have to use something simmilar: Checkbox
<input type="checkbox"> have "checked" and "unchecked" state and it is practicaly the same as "pressed" or "unpressed".
SOLUTION:
The trick is to stylize the ckeckbox with CSS so it visually appears as a pressed or unpressed button. Here is an example how checkbox can be stylised - you need to modify the CSS in order to appear it like a button, not a toggle switch!
You will want to use CSS selectors like this (as shown in example):
input[type="checkbox"]:checked { ... },
input[type="checkbox"]:checked + .slider { ... },
Related
I want to make a div appear when I click on another div. I was thinking of doing this by using JavaScript to change the class of the div when the other div is clicked on.
This is the HTML of the div I want to appear:
<div id="menutext1" class="hidden"></div>
This is the HTML of the control div (the one to click on to make the above div appear):
<div id="menu1"></div>
This is the CSS:
.hidden { display: none; }
.unhidden { display: block; }
I've looked everywhere and nothing seems to work for me!
I don't have much experience with JavaScript or JQuery but I can understand it.
Thanks in advance :))
.addClass(), .removeClass() should do what you need. .toggleClass() might also be useful. You want to do something like this in your onClick() method:
$('#menu1').click(function() {
$('#menutext1').addClass('unhidden')
});
Swap in toggleClass() if you want to be able to hide/unhide. I should add that these are JQuery functions so make sure to include JQuery in your project.
You have several options to achieve this:
$('#menu1').on('click', function(){
$('#menutext1').show();
// OR
$('#menutext1').toggleClass('hidden unhidden');
// OR
$('#menutext1').removeClass('hidden ').addClass('unhidden');
});
Demo
Note: When working with jQuery and DOM-Manipulation have a look at the .ready() function.
Reference
.on()
.toggleClass()
.removeClass()
.addClass()
.show()
You can do it without JQuery using the classList.toggle method. And you don't really need the unhidden class. When the hidden class is toggled off, the div should return to its default display (block).
// get the element you want to click on
var controlDiv = document.getElementById('menu1');
// assign a function to run when it is clicked
controlDiv.addEventListener('click', function() {
// turn the hidden class off or on
document.getElementById('menutext1').classList.toggle('hidden');
});
Trying to change the status of font-awesome when checkbox is checked heart should change to red. Can't find the right thing to make it work.
can I click the heart and hide the checkbox? I know its something :before in the css but not entirely sure.
http://jsfiddle.net/xd8LbtLz/
$('.addToFav').click(function(){
if($(this).prop('checked')){
console.log('change heart to red');
} else {
console.log('do nothing atm');
}
})
Firstly, your fiddle did not include jQuery. Secondly, there's no point using prop to access a property of an element in a jQuery object when you can directly access the element itself. Lastly, you can use toggleClass() to add or remove a CSS class to change the colour of the hearts. Try this:
$('.addToFav').click(function () {
$('.fa-heart').toggleClass('red', this.checked);
})
Example fiddle
You can use,
$('.addToFav').click(function() {
if ($(this).prop('checked')) {
$(this).prev().find("i").css("color", "red");
} else {
$(this).prev().find("i").css("color", "black");
}
})
Fiddle
Few points
1) Your fiddle did not had jquery library included. which you need to include for using jq syntax.
2) Using change event is more appropriate in case of checkbox than click event.
3) use current checked property to set color to icon .fa-heart
$('.addToFav').change(function(){
$(this).prev().css('color',this.checked ? "red":"black");
});
Working Demo
initially i say that i'm newbie with jquery and js :D , i need to create a function in jquery to add a css rule after click event on a button, i have done it and it works:
$(".resp-toogle").on("click",function() {
$(".fit").css('top','200px');
});
in this case when there's a click action on .resp-toogle, there's a css rule added for fit css class. But i need that clicking again on .resp-toogle , would be a reset top margin for fit class.
I have checked documentation and tested something but i don't find solution.
I know i need study and test with jquery :).
Assuming that you want successive clicks on the element to enable/disable the top CSS positioning on the .fit element, you can use toggleClass.
Firstly, setup the class in your CSS:
.fit.top {
top: 200px;
}
Then, use the toggleClass() function in your jQuery code:
$(".resp-toogle").on("click",function() {
$(".fit").toggleClass('top');
});
Example fiddle
What you need is a sort of toggle button so try this:
add a css class
.themargin{
top: 200px;
}
then toggle the class on each click
$(".resp-toogle").on("click",function() {
$(".fit").toggleClass('themargin');
});
function docs here
Having a bit of difficulty getting this jquery to work. I have a form where all fields are nested in a div.form-group. The subscribe button has an id of subscribe.
I want the form fields to disappear on click... but my js is not working out. Here's what I've tried, to no avail:
(function($) {
window.onload = function () {
$("#subscribe").click(function() {
$(".form-group").css("display: none");
});
}
})(jQuery);
The form-group class is set to display: block in the CSS.
Is there something obvious I'm missing here? Any help is greatly appreciated.
cheers,
jQuery provides a .hide() method as a shortcut to setting the various CSS directives that hide an element (display: none and visibility: hidden, for example).
$(".form-group").hide();
If you prefer to set the CSS directly, place quotes around both elements of the statement:
$(".form-group").css("display", "none");
$(".form-group").css("display: none");
supposed to be
$(".form-group").css("display", "none");
**OR**
$(".form-group").css({ "display" : "none"});
you have been trying to set the attribute as a single string.
It is supposed to be comma separated if it's only a single attribute that you want to change.
Or an object if you want to target multiple css properties at the same time.
$("#subscribe").click(function() {
$(".form-group").hide()
});
}
$( "#anotherid" ).on('click', function() {
$( "#idhere" ).hide('slow');
});
Try this
I have various styles, such as:
.line{}
And:
.line:focus{}
Each have their own unique look.
What I want to do is have jquery focus on a div with the .line class and thus change it's style to line:focus. However, when using $('.line').focus();, the style does not change, and I'm reasonably sure the div with .line class is not focused on.
Any ideas/suggestions? Thanks in advance :).
jQuery's focus would work, demo
Edit:
Without a focus-able element, I would use toggleClass demo2
$(".").focus() only works on certain elements.
DIV isn't a supported element to be focused.
You can try to recreate focus using .click
$("div").click(function(){
$(this).toggleClass('focused');
if ($(this).hasClass('focused')){
// do something
}else{
// do something else
}
});
div elements don't support a focus state that I'm aware of, so you'll have to manually change the divs style anytime one of its inputs is focused (and of course change it back when the input is blurred).
$("div.line input").focus(function() {
$(this).closest(".line").addClass("line-focus");
}).blur(function() {
$(this).closest(".line").removeClass("line-focus");
});
And of course change
.line:focus { }
to
.line-focus { }
$('input').focus(function() {
$(this).css('background','green');
});
See example