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
Related
How can I make a figure element collapsible, without adding an extra button?
<figure><img src="abc.png"></figure>
By default, I would like to place a button to open the image at this point. Can this button be generated automatically?
You can use the slideToggle() function assuming you have jQuery included (HIGHLY RECOMMEND).
Then you can simply do:
$( "#myButton" ).click(function() {
$( "figure" ).slideToggle( "slow" );
});
You will need to of course add a button. You could append one with jQUery (automatically) or you can edit the HTML to get it there.
Here is the HTML way
<button id="myButton">Click Me</button>
Here is the jQuery way (untested)
$('figure').append("<button id='myButton'>Click Me</button>");
Best of Luck to You! (again this is all untested)
Come to think of it you probably want after() instead of append()
because your button will disappear after you toggle once.
Use this
$('figure').after("<button id='myButton'>Click Me</button>");
Link to jQuery slideToggle: http://api.jquery.com/slidetoggle/
Check out this simple code snippet to toggle image using figure element itself
$('#accordian_img').click(function () {
$('.img-toggle').toggleClass("show"); // toggle show class to image element
});
/* Image style to show and hide */
.img-toggle.show {
display:block;
}
.img-toggle {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure id="accordian_img" style="width:400px;cursor:pointer">
Click To Toggle Image
<img class="img-toggle" src="http://placehold.it/400x150">
</figure>
I have an Animation with Animate.css
$('#log-circle').addClass('animated flipInY');
This animation occurs on Page Load - no problem
But I want to reload the same animation when the user hover a submit button.
My initial idea is to reload the animation on CLICK, (if its possible will be perfect) - but I think that animation will never occurs because with the click on submit button the page will change to another..
then I'm trying to reload the animation on hover - like:
<script>
$( ".log-btn" ).hover( function() {
$('#log-circle').addClass('animated flipOutY');
});
</script>
but nothing happens..
IMPORTANT: THE ANIMATION OCCURS iN A IMAGE. (not in the button)
thank for all help!
http://jsfiddle.net/j03hgtae
Daniel
Using .addClass().removeClass() won't actually trigger the animation. The easiest way to re-trigger a CSS animation is to clone the element.
$('#log-circle').addClass('animated flipInY');
$('#log-btn').hover( function() {
// Clone the original element
var element = $('#log-circle'),
clone = element.clone(true);
// Insert the cloned element before the original element
element.before(clone);
// Remove the original element
element.remove();
});
See the updated fiddle
And, as stated in the first answer, you were targeting .log-btn instead of #log-btn.
You are targeting .log-btn, but no such class exists.
<button type="submit" **class="btn btn-sm input-group-sm**" style="width: 160px; margin-bottom: 10px; margin-top: 10px" **id="log-btn"** name="log-btn">Login</button>
$( ".log-btn" ).hover( function() {
$('#log-circle').RemoveClass('animated flipOutY');
$('#log-circle').addClass('animated flipOutY');
});
Instead, you should be targeting #log-btn, as the button (see below) is using an ID identifier as opposed to a Class identifier.
$( "#log-btn" ).hover( function() {
$('#log-circle').RemoveClass('animated flipOutY');
$('#log-circle').addClass('animated flipOutY');
});
Your solution is to replace ( ".log-btn" ).hover with ( "#log-btn" ).hover. Alternatively, consider adding a class named "log-btn" to the button element.
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 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/
How can I achieve this behaviors onclick with jquery :
default state:
Anchor
click state
<div class="highlight">
Anchor
</div>
Well, you can use the jQuery "wrap" function:
$('#idOfAnchor').click(function(a) {
$(a).wrap($('<div/>').addClass('highlight'));
});
That seems like kind-of a funny idea however. Why not just add the class directly to the <a> element itself?
Oh sorry - your question says "clicked" but the explanation says "hover". That's going to be a little trickier, because you're going to want to get rid of that extra div when you mouse out. Again, if this were my page, I just wouldn't do that at all. What is it that you're trying to achieve?
edit again: ok now it says "click" again :-)
Fastest way to do this:
$('a').click(function() {
$(this).wrap($('<div/>', { 'class': 'highlight'}));
});
However, this is probably what you want, much simpler just use whatever CSS effect you want:
$('a').click(function() {
$(this).addClass('highlight'});
});
Checkout jQuery's wrap function.
$(this).wrap('<div class="highlight"></div>');
Why don't you just style a:hover?
Something like this in CSS:
.highlight a {
/* style */
}
.highlight a:hover {
/* hover style */
}
Then change your HTML to:
<a href="something.html" class='highlight'>Anchor</a>