I try to hide an search bar in jquery after changing his class
My problem is when I click on the element to hide the search bar nothing happend
I try to add this :
$('#menu_bas').on('click', ".fa-times", function () {
$('.c_hover').css('display', 'initial');
$('#wrapper-category').css('text-align', 'middle');
$('#search_input').css('display', 'none');
$('.fa-times').addClass('fa-search');
$('.fa-times').removeClass('fa-times');
});
Here is my jsfiddle : https://jsfiddle.net/Lqsqgxpn/5/
You need to use the delegation for both cases since you apply it to the same element, but want to differentiate based on the current class.
Otherwise the .fa-search click handler would run in both clicks and mess thigs up
$('#menu_bas')
.on('click', '.fa-search', function() {
$('.c_hover').css('display', 'none');
$('#wrapper-category').css('text-align', 'right');
$('#search_input').css('display', 'inline-block');
$('.fa-search').addClass('fa-times');
$('.fa-search').removeClass('fa-search');
})
.on('click', ".fa-times", function() {
$('.c_hover').css('display', '');
$('#wrapper-category').css('text-align', '');
$('#search_input').css('display', 'none');
$('.fa-times').addClass('fa-search');
$('.fa-times').removeClass('fa-times');
});
updated fiddle: https://jsfiddle.net/Lqsqgxpn/24/
It would be better, though, to just toggle a class to the #menu_bas element, and handle all changes through CSS
Like this
$('#menu_bas')
.on('click', '.fa-search, .fa-times', function() {
$('#menu_bas').toggleClass('search-active');
$(this).toggleClass('fa-times fa-search');
});
and
.search-active .c_hover {display: none}
.search-active #wrapper-category {text-align: right}
.search-active .search_input {display: inline-block;}
updated fiddle: https://jsfiddle.net/Lqsqgxpn/29/
Related
here is my fiddle
why when a div is clicked from another div does the arrow not appear back when the other div has collapsed? i have it set up so when the div does not have the class 'clicked' it then removes the class 'arrowhide' but it when you do the above it doesn't seem to remove the 'arrowhide' even though the div no longer has the class 'clicked' here is my code...
$(function timelinetiles() {
$('.timelineTile').click(function (evt) {
evt.stopPropagation();
$('.selected').children().not(this).removeClass('clicked');
$(this).toggleClass('clicked');
if ($('.selected').children().hasClass("clicked")) {
$('.details').addClass('show');
}
if ($('.timelineTile').hasClass("clicked")) {
$(this).children('.arrow').addClass('arrowhide');
} else {
$('.arrow').removeClass('arrowhide');
}
if ($('.selected').children().hasClass("clicked")) {
$(this).children('.header').height(430);
} else {
$('.header').height(80);
}
});
});
$(document).click(function () {
$('.timelineTile').removeClass('clicked');
$('.details').removeClass('show');
$('.arrow').removeClass('arrowhide');
});
Your line 4 also needs to remove the arrowhide class, like this:
$('.selected').children().not(this).removeClass('clicked')
.children('.arrow').removeClass('arrowhide');
Updated fiddle: http://jsfiddle.net/mcx0t0fh/2/
Alternatively, you could do away with the arrowhide business, and change your .arrow.arrowhide CSS rule to .clicked .arrow
Alternative fiddle: http://jsfiddle.net/mcx0t0fh/4/
I want to remove all active classes when clicking anywhere on the screen, but if a clicked element has the .dropdown class, I would also want to toggle the .active class into that element.
// remove all .active classes when clicked anywhere
hide = true;
$('body').on("click", function () {
if (hide) $('.dropdown').removeClass('active');
hide = true;
});
// add and remove .active
$('body').on('click', '.dropdown', function () {
var self = $(this);
if (self.hasClass('active')) {
$('.dropdown').removeClass('active');
return false;
}
$('.dropdown').removeClass('active');
self.toggleClass('active');
hide = false;
});
I have this working with the above but I'm worried capturing a body click is overkill, and unnecessary. Is there a better solution?
jsiddle - I've set several li's to the .active class, if you click around you will see they get removed. Clicking an li will trigger toggleClass('active'), whilst still removing all .active classes.
you could try doing:
$('body').on("click", function (ev) {
if( $(ev.target).hasClass('.dropdown') ) {
//you clicked on .dropdown element, do something
}
else {
//you clicked somewhere other than dropdown element
}
});
I have the following simple code:
jQuery( document ).ready(function( $ ) {
$('.menu ul li:has("ul")').hover(function() {
$('>ul', this).stop().slideToggle();
});
});
I'm using the 'no conflict' way of firing jQuery but for some reason my slide toggle is closing on hover rather than opening! What am I doing wrong? I'm sure its simple but I just can't see it.
An example can be seen here http://ng1club.everythingcreative.co.uk
Use mouseenter and mouseleave instead. Sometimes hover without the second function as a hover out, triggers twice.
$('.menu ul li:has("ul")').mouseenter(function() {
$('>ul', this).stop().slideDown();
}).mouseleave(function() {
$('>ul', this).stop().slideUp();
});
Try this according to documentation you can use hover and apply effect on hover and hover out
jQuery('.menu ul li:has("ul")').hover(
function() {
jQuery('>ul', this).stop().slideDown();
}, function() {
jQuery('>ul', this).stop().slideUp();
}
);
.hover()
Sample Fiddle
I am not sure toggleClass is the best way to do this, but I have a accordion menu and I am attempting to alternate the icon/image on the right side from a RIGHT arrow to a DOWN arrow.
The first click on the 3 menu items shows the DOWN image (.icon-03) but when I switch between the accordion items it does not go back to the RIGHT arrow image/class (.icon-04).
thoughts?
/* Accordion */
$(document).ready(function () {
$('#accordionFAQ > li > a').click(function(e){
if ($(this).attr('class') != 'active'){
$('#accordionFAQ li ul').slideUp();
$(this).next().slideToggle();
$('#accordionFAQ li a').removeClass('active');
$(this).addClass('active');
//add down arrow
$('> span', this).toggleClass('icon-03 icon-04');
//prevent page reload
e.preventDefault();
}
});
});
Demo JS Fiddle: http://jsfiddle.net/957Fs/
First of all, $(this).attr('class') != 'active' is very inefficient (and possibly fails to work altogether), use $(this).hasClass('active') instead.
After your comment, I re-added the classes - the following should work:
$('#accordionFAQ > li > a').click(function(e){
if (! $(this).hasClass('active') ){
$('.active')
.find('span').toggleClass('icon-03 icon-04')
.end().removeClass('active')
.next().slideUp();
$(this).find('span').toggleClass('icon-03 icon-04')
.end().addClass('active')
.next().slideDown();
//prevent page reload
e.preventDefault();
}
});
When I look at the JSFiddle example it works for me, so I guess it's updated already. I'd like to make a suggestion though: it's perhaps a good idea to just toggle a class (e.g. 'is-active') on your list items and handle the rest with pure CSS. For example:
var $faq = $('#accordionFAQ');
$faq.on('click', '> li > a', function (event) {
$(this).parent().toggleClass('is-active');
});
In your CSS you could do something like this:
#accordionFAQ > li > a span {
// width, height etc
background-position: x y;
}
#accordionFAQ > li.is-active > a span {
background-position: x y;
}
Just an idea; hope it's helpfull.
/* Accordion */
$(document).ready(function () {
var accordionFAQ = $('#accordionFAQ');
// let's use jQuery's .on() rather than .click()
accordionFAQ.find('a').on({
click:function(e){
// prevent the default action
e.preventDefault();
// setup some variables
var that = $(this);
// close open ULs
accordionFAQ.find('ul').slideUp();
// remove .active from other controller
accordionFAQ.find('.active').removeClass('active');
// add .active to clicked controller and show UL
that.addClass('active').next().slideDown();
// remove .right from span
accordionFAQ.find('.right').removeClass('right');
// add .right to current controller's span
that.find('span').addClass('right');
}
});
});
Then, you can have span's default image be the left arrow. and when you add a .right class, it will override the default image with a right arrow using CSS.
hope this helps.
i have problem with click event. click to another element with event(click), doesn't count like click elsewhere. I want active one element or none.
demo: http://jsfiddle.net/WP4RH/
code:
$('span').click(function(){
var $this = $(this);
if($this.hasClass('active')){
$this.removeClass('active')}
else $this.addClass('active');
$('div').click(function(){
if (!$this.has(this).length) {
$this.removeClass('active');
}
});
return false;
});
Add this at the beginning of your span event handler:
$('.active').removeClass('active');
Demo
This is assuming that you want multiple clicks on the same span to retain active. If you don't want that, then let me know and I can modify the code.
For starters, You should move the div handler outside and then removeClass based on div element.
$('span').click(function(e) {
e.stopPropagation();
$(this).parent().find('span').removeClass('active');
$(this).toggleClass('active');
});
$('div').click(function() {
$(this).find('span').removeClass('active');
});
DEMO: http://jsfiddle.net/WP4RH/1/
Don't bind a click handler inside a click handler, just check if the target is the div or the span inside the click handler instead. Also, when adding the active class to this, just remove it on any sibling span :
$('span').on('click', function(){
$(this).toggleClass('active').siblings('span').removeClass('active');
});
$('div').on('click', function(e){
if (e.target == this) $('span').removeClass('active');
});
FIDDLE
If you want to keep the toggle-off functionality when the span itself has been clicked, then you can use the following. Also, note that you're binding an event handler each time a span is clicked.
http://jsfiddle.net/WP4RH/7/
$("span").click(function() {
$(this).siblings("span").removeClass("active"); // remove from other spans
$(this).toggleClass("active"); // toggle this span
return false;
});
$("div").click(function() {
$(this).find("span").removeClass("active"); // remove from all spans
});