I have a small panel that slides out from the bottom. It has a chevron up icon. I am building a jquery snippet that bring it up (opens it) and closes it but all it must change the chevron from up to down.
The opening and closing is working and the chevron changes when it opens but it doesn't reset back to chevron up when it closes. Something is wrong in my conditional statement.
This is what I have so far
<script>
$("#openchat").click(function(){
$("#floatingmenu").toggleClass("chatbox-open");
if ($(this).hasClass("chatbox-open")) {
$(this).removeClass("fa-chevron-up");
$(this).addClass("fa-chevron-down");
} else if (!$(this).hasClass("chatbox-open")) {
$(this).addClass("fa-chevron-down");
$(this).removeClass("fa-chevron-up");
}
});
</script>
I am attaching a CODEPEN DEMO
BTW, my .chatbox-open class is what opens it and closes it. The other classes are simple font-awesome classes for the icons
Any help please
Your code only ever goes into the else because #openchat never has its classes toggled elsewhere.
You can just change to this
$("#openchat").click(function () {
$("#floatingmenu").toggleClass("chatbox-open");
$(this).toggleClass("fa-chevron-up fa-chevron-down")
});
Live example: http://codepen.io/anon/pen/myBeEb
actually you don't need that check because if $(this).hasClass("chatbox-open") is false it will go straight to else and execute it.
<script>
$("#openchat").click(function(){
$("#floatingmenu").toggleClass("chatbox-open");
if ( $(this).hasClass("chatbox-open") ){
$(this).removeClass("fa-chevron-up");
$(this).addClass("fa-chevron-down");
} else {
$(this).addClass("fa-chevron-down");
$(this).removeClass("fa-chevron-up");
}
});
</script>
just remove from else the if (!$(this).hasClass("chatbox-open"))
Related
I am building a website, however I have encountered a problem. The initial links used to switch an overlay class from invisible to visible work, however when I click on the links in the visible overlay they will not switch the class back again. The code that I have is here:
<div id="login-overlay" class="overlay-hidden">
<div class="popup-box">
Close
</div>
</div>
The link buttons to change the overlay class to visible are here:
Login
The javascript function is:
function change_Login_Overlay_Class () {
if($("#login-overlay").hasClass("overlay_visible")){
$("#login-overlay").removeClass("overlay-visible").addClass("overlay-hidden");
}
else{
$("#login-overlay").removeClass("overlay-hidden").addClass("overlay-visible");
}
}
If it is any help I am using the Bootstrap framework aswell.
Any help or a point in the right direction would be greatly appreciated!
function change_Login_Overlay_Class () {
if($("#login-overlay").hasClass("overlay-visible")){
$("#login-overlay").removeClass("overlay-visible").addClass("overlay-hidden");
}
else{
$("#login-overlay").removeClass("overlay-hidden").addClass("overlay-visible");
}
}
You wrote your classes wrong!
I want to make a login slider with jQuery. You will have a div at the top of your page with a plus image. I want the plus image to be changed into a minus image and the div will slide down. Here is my code but there is a problem.
<script src="_js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("form").hide();
$(".open").click(function() {
$("form").slideDown("slow");
$(".open").addClass("close");
$(".close").removeClass("open");
$(".close").click(function() {
$("form").slideUp("slow");
$(".close").addClass("open");
$(".open").removeClass("close");
});
});
});
</script>
It works once but if you want to slide it down for the second theme it doesn't work anymore.. Can somebody help my please?
tnx!
Working JSFiddle
Try something different like the following:
$('.open').click(function () {
$('form').slideToggle('slow', function () {
$('.open').toggleClass('form-is-open');
});
});
jQuery offers some toggle functions which supply the desired behaviour. This way you don't need two click handlers or keep track of classes yourself. The above code simply adds a class ('form-is-open') to the button, when the form is shown and removes it, when it is hidden.
If the page is loaded and the browser window is between 1100px & 640px, the following jQuery script works properly:
$('#mobileMenu').click(function(){
if ($('body').hasClass('mobile-nav-open')) {
$('body').removeClass('mobile-nav-open')
} else {
$('body').addClass('mobile-nav-open');
};
});
What this does is when a#mobileMenu is clicked, a class is added to body and the mobile nav menu slides in, then the class is removed and the mobile nav menu closes upon another click.
But if the page is loaded at <=640px, the class .mobile-nav-open never gets added onto the body. I cannot for the life of me figure out why it isn't working. This code is also being inserted through Squarespace's code injection into the footer. There's a lot of JS packed into the template that may be interfering, but I can't figure out how to override it. Anyone able to help me out? Any help is appreciated.
The site can be seen here: https://ryan-vandyke-4rks.squarespace.com/
This looks to be what I'm trying to override:
Y.use(function (a) {
a.on("domready", function () {
if (640 >= a.one("body").get("clientWidth")) a.one("#mobileMenu").on("click", function () {
a.one("body").hasClass("mobile-nav-open") ? a.one("body").removeClass("mobile-nav-open") :
(a.one("body").addClass("mobile-nav-open"), a.one("body.email-open") && a.one("body").removeClass("email-open"), a.one("body.desc-open") && a.one("body").removeClass("desc-open"))
});
})
});
Instead of add/remove class on click try below approach to add/remove class on body tag.
function addBodyClass(){
if($(window).width() <= 640){
$('body').addClass('mobile-nav-open');
} else {
$('body').removeClass('mobile-nav-open');
}
}
$(window).on('load resize', function(){addBodyClass()})
Fiddle Demo
I have this show/hide set up here: http://jsfiddle.net/TwDSx/38/
What I would like to do is have the plus sign go away if the content is showing and vise versa if the content isn't showing hide the minus sign and show the plus.
I read articles on this using images to swap out, but nothing with just using html/css. Also, I would like to keep the javascript out of the html if this is possible, and just call for it externally.
any help is appreciated!
EDIT :
You can attach an event handler on your click to toggle the display attribute of the + or - button
$('#hide,#show').click(function(){
$('#hide,#show').toggle();
})
Quick demo:
http://jsfiddle.net/TwDSx/39/
I modified your Javascript a little and extended it so you can keep it in an external file, you just need to ensure you hide the #show div with CSS if you load the page with the content already showing, or vice-versa for the #hide.
The Javascript is as follows:
$('#show').click(function() {
ShowClick();
});
$('#hide').click(function() {
HideClick();
});
//This Javascript can be external
function ShowClick() {
$('#content').toggle('slow');
$('#hide, #show').toggle();
};
function HideClick() {
$('#content').toggle('fast');
$('#show, #hide').toggle();
};
The Js-Fiddle can be seen here: http://jsfiddle.net/mtAeg/
I think the simplest solution is to have only one button, #toggle, and to change the content of that button like so:
$('#toggle').click(function () {
if (this.innerHTML == '-') {
$('#content').slideUp('fast');
this.innerHTML = '+';
} else {
$('#content').slideDown('slow');
this.innerHTML = '-';
}
});
fiddle
trying to implement menu from :this tutorial, but dont know how to make when one submenu is toogle open to automaticly closed himself when another is toogle open.
thx
you can use a selector to get "Not This", on the this.click event which will return all of the other menus and will allow you to close them.
Supplying some source code will probably get you a better answer.
You could close all open toggles before the new one is opened.
$(document).ready(function(){
hideMenus();
$('.toggle').click(function(){
var menu = $(this);
hideMenus();
if (menu.hasClass('toggle-open')) {
menuHide(menu);
}else{
menuShow(menu);
}
});
});
function hideMenus(){
$('.toggle').each(function(){
menuHide($(this));
});
}
function menuHide(menu){
menu.removeClass('toggle-open').addClass('toggle-closed').empty('').append('+').parents('li').children('ul').slideUp(250);
menu.parent('.menutop').removeClass('menutop-open').addClass('menutop-closed');
}
function menuShow(menu){
menu.parent('.menutop').removeClass('menutop-closed').addClass('menutop-open');
menu.removeClass('toggle-closed').addClass('toggle-open').empty('').append('–').parents('li').children('ul').slideDown(250);
}