Toggle click, add an remove classes with Js - javascript

I created this slide menu, activated by a button. I'm using toggle(); to do that. But, I need two CSS effects: fadeIn and fadeOut.
So, I put addClass(); to solve the problem. Sucess! But I can't do the same to fall the menu back. For example: Click on the button and add FadeIn class. The menu appears. Then, you have to click on the same button again, To remove fadeIn class and add the fadeOut class.
This is my actual code:
$(function(){
$('.menu-btn').click(function(){
$('.leftmenu').toggle();
$('.leftmenu').addClass('fadeInLeft animated');
});
});
And here my working example http://jsfiddle.net/N8S9y/
Any help will be much appreciated. thanks in advance!

This will work for you
$(function(){
$('.menu-btn').click(function(){
$('.leftmenu').toggle();
if($('.leftmenu').hasClass('fadeInLeft'))
{
$('.leftmenu').removeClass('fadeInLeft').addClass('fadeOut');
}
else
{
$('.leftmenu').removeClass('fadeOut').addClass('fadeInLeft');
}
});
});`

I think you're looking for .toggleClass():
$('.leftmenu').toggleClass('FadeIn fadeOut');

Related

Divi : Hide Button when clicked

I'm a novice in jQuery coding, and I need help with my code.
I have a button that allows me to reveal a hidden section on my website, but at the moment the button remains even though I want him to disappear.
My website is built with Wordpress and Divi.
With the following code, you will have my latest attempt with the hide/show value in CSS.
<style type="text/css">
.rv_button.closed:after {content:"";}
.rv_button.opened:after {content:"";}
.hide {display:none;}
.show {display:block;}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e) {
e.preventDefault();
jQuery("#reveal").slideToggle();
jQuery('.rv_button').toggleClass('opened closed');
});
});
</script>
If you want to see what it looks like, you can see the example here: https://divinotes.com/reveal-a-hidden-divi-section-row-or-module-on-button-click/
You're toggling classes named opened and closed, while your CSS shows that hide and show are the ones affecting element's presence in the final render of the page. Also there's probably no need for most classes. You can just add the hide one.
Chance your last non-trivial line to
jQuery('.rv_button').addClass('hide');
If you already have show class applied to the button, then your original idea makes sense. You just need to change the classes to match the ones you defined in styles.
jQuery('.rv_button').toggleClass('show hide');
Just add $(this).hide() in your click function.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e) {
e.preventDefault();
jQuery("#reveal").slideToggle();
jQuery('.rv_button').toggleClass('opened closed');
// Hide button
$(this).hide()
});
});
</script>
Thanks everyone for your involvment in my question. I managed to use the solution of #vmf91 which works like a charm. Thanks again guys and have a lovely day.
Do you want to remove the button after clicking over it? If so, you just need to insert the following line inside the button event:
jQuery(this).hide();
The complete click event:
jQuery('.rv_button').click(function(e) {
e.preventDefault();
jQuery(this).hide();
jQuery("#reveal").slideToggle();
//You don't need this if you want to hide the button
//jQuery('.rv_button').toggleClass('opened closed');
});

Show/Hide SubMenu issue

I have a simple menu system on my website. Demo: http://jsfiddle.net/a41xkr9z/2/
My Problem: when I click 'Projects' it displays the submenu. However, if you click 'Projects' again, it hides the menu. How do I prevent this?
Javascript:
$('#menu-primary-menu>li>a').click(function() {
$(this).parents("ul").find("li>ul").not($(this).next()).hide();
$(this).next().toggle();
});
Change $(this).next().toggle(); to $(this).next().show();.
$('#menu-primary-menu>li>a').click(function() {
$(this).parents("ul").find("li>ul").not($(this).next()).hide();
$(this).next().fadeIn();
});
If you use .toggle() the function change the status of the element hidden/shown.
Use .show() or .hide() if you only want one action.

CSS3 Drop-down menu fake JS issues

I am trying to do a dropdown menu stylised with Jquery and css3.
I did the job and it's exactly what i want.
The only problem is that it's a trick with Jquery.
I want to hide/show a div when i click on one of my menu button.
The problem is that it does not do the job.
But it work without the trick.
Here the code working:
https://jsfiddle.net/74ca3epv/2/
You can see this is working, but
remove the display:none from the .styledSelect
and you see that the show/hide div doesnt work anymore.
I hope you can understand what i mean.
All comments are welcome :) thanks!
You have to make changes here:
$listItems.click(function (e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass('active');
$this.val($(this).attr('rel'));
$list.hide();
//alert($(this).attr('rel'));
if($(this).attr("rel")=="reservation1"){
$("#information").hide();
$("#reservation").show();
}
if($(this).attr("rel")=="information1"){
$("#reservation").hide();
$("#information").show();
}
if($(this).attr("rel")=="choose1"){
$("#reservation").hide();
$("#information").hide();
}
/* alert($this.val()); Uncomment this for demonstration! */
});
Check Fiddle link.

jQuery Get ID based on Class, write to HTML and fadeIn

I've been having an issue getting this working.
I am able to get the ID based on the Class of a div, and output it to the screen, but I cannot get the fadeIn method to work on the same div.
here is what I have so far at jsFiddle: http://jsfiddle.net/Y8Ara/1/
and here is the jQuery:
$('.courseLink').mouseover(function() {
$('div#courseTitle').text(this.id);
});
If at all possible, I would also like to make the text fade out on mouseout as well.
Any help is greatly appreciated!
SOLVED: Thanks to Adil & roasted! I have also added the fadeOut functionality if anyone else was wondering - http://jsfiddle.net/Y8Ara/17/
Could be done like this:
DEMO
$('.courseLink').hover(function() {
$('div#courseTitle').hide().fadeIn().text(this.id);
},function(){
$('div#courseTitle').stop().fadeOut();
});​
do you mean something like:
$('.courseLink').on({
mouseenter: function() {
$('div#courseTitle').hide().text(this.id).fadeIn("slow");
},
mouseleave: function() {
$('div#courseTitle').text('');
}
});

Click to reveal and hide menu

I asked a question yesterday about a click to reveal menu which got answered perfectly. However, I was wondering how I can make the div fade in when the text "project info" is clicked and then fade out again when "project info is clicked again". I know this is probably a very basic thing but i'm extremely new to javascript and jquery and would appreciate some help greatly. The html code is as follows:
<div class="descinner">
Project info
</div>
and the Javascript:
$('.showDesc').click(function(e) { e.stopPropagation(); $(this).next().toggle(); });
$('body').click(function() { $('.showDesc').next().hide(); });
Have you tried the fadeToggle() method?
Like this:
$('.showDesc').click(function() {
$('.info').fadeToggle();
});
This will show the .info div on the first click of .showDesc, and hide it on the second (and so on)..
write a custom function and call it onClick...inside that function you can put your fadeIn and fadeOut...and you especially can't do it with .toggle().
Check out the FadeIn() function. Use it on the element you want to fade in.
you have jQuery animation functions: fadeIn and fadeOut. you can also use show and hide functions. just set the desired speed parameter
$('your_div').fadeIn(100);
$('your_div').fadeOut(100);

Categories