CODEWITHSUNDEEP
jqueryclick
Ana DEV
Ana DEV

Reputation: 1030

How to close one sidebar when opening the second one with jquery?

I have two sidebars click with this code

jQuery('.vinfo_icon').toggle(function() { 
            if(jQuery('#hidden_sidebar').is(':visible')){
                    jQuery('#hidden_sidebar').fadeOut(5);
            }
            if(!jQuery('.teenvoice_smalllogo img').hasClass('slideInLeft')){
                jQuery('.teenvoice_smalllogo img').addClass('slideInLeft');
                jQuery('.teenvoice_smalllogo img').show();
            }
            if(jQuery('.teenvoice_smalllogo img').hasClass('slideOutLeft')){
                jQuery('.teenvoice_smalllogo img').removeClass('slideOutLeft');
            }
            if(jQuery('.hidden_vinfo_sidebarwrap').hasClass('slideOutLeft')){
                 jQuery('.hidden_vinfo_sidebarwrap').removeClass('slideOutLeft'); 
                 jQuery('.hidden_vinfo_sidebarwrap').hide(600);
            }
           if(!jQuery('.hidden_vinfo_sidebarwrap').hasClass('slideInLeft')){
                jQuery('.hidden_vinfo_sidebarwrap').show();
                jQuery('.hidden_vinfo_sidebarwrap').addClass('slideInLeft');
           } 
        }, function() {
            if(jQuery('#hidden_sidebar').is(':visible')){
                    jQuery('#hidden_sidebar').fadeOut(5);
            }
            if(jQuery('.teenvoice_smalllogo img').hasClass('slideInLeft')){
                jQuery('.teenvoice_smalllogo img').removeClass('slideInLeft');
            }
           if(!jQuery('.teenvoice_smalllogo img').hasClass('slideOutLeft')){
              jQuery('.teenvoice_smalllogo img').addClass('slideOutLeft');
              jQuery('.teenvoice_smalllogo img').hide(); 
           }
           if(jQuery('.hidden_vinfo_sidebarwrap').hasClass('slideInLeft')){
               jQuery('.hidden_vinfo_sidebarwrap').removeClass('slideInLeft');
               jQuery('.hidden_vinfo_sidebarwrap').hide(600);
           }
           if(!jQuery('.hidden_vinfo_sidebarwrap').hasClass('slideOutLeft')){
                jQuery('.hidden_vinfo_sidebarwrap').addClass('slideOutLeft');
           }
        });

I am using toggle and sometimes it didn't work, for example when I first click to first one and without closing it clicking to second one.Also I tried with the click not toggle like this 

jQuery('.contact_icon').click(function(){
            if(jQuery('#vinfo_sidebar').is(':visible')){
                    jQuery('#vinfo_sidebar').fadeOut(5);
            }
            if(!jQuery(".hidden_innerwrap").is(':visible')){
                if(!jQuery('.teenvoice_smalllogo img').hasClass('slideInLeft')){
                    jQuery('.teenvoice_smalllogo img').addClass('slideInLeft');
                    jQuery('.teenvoice_smalllogo img').show();
                }
                if(jQuery('.teenvoice_smalllogo img').hasClass('slideOutLeft')){
                    jQuery('.teenvoice_smalllogo img').removeClass('slideOutLeft');
                }
                if(jQuery('.hidden_innerwrap').hasClass('slideOutLeft')){
                     jQuery('.hidden_innerwrap').removeClass('slideOutLeft'); 
                     jQuery('.hidden_innerwrap').hide(600); 
                }
               if(!jQuery('.hidden_innerwrap').hasClass('slideInLeft')){
                    jQuery('.hidden_innerwrap').show();
                    jQuery('.hidden_innerwrap').addClass('slideInLeft');
               }  
            }else{
                if(jQuery('.teenvoice_smalllogo img').hasClass('slideInLeft')){
                    jQuery('.teenvoice_smalllogo img').removeClass('slideInLeft');
                }
               if(!jQuery('.teenvoice_smalllogo img').hasClass('slideOutLeft')){
                  jQuery('.teenvoice_smalllogo img').addClass('slideOutLeft');
                  jQuery('.teenvoice_smalllogo img').hide(); 
               }
               if(jQuery('.hidden_innerwrap').hasClass('slideInLeft')){
                   jQuery('.hidden_innerwrap').removeClass('slideInLeft');
                   jQuery('.hidden_innerwrap').hide(600);
               }
               if(!jQuery('.hidden_innerwrap').hasClass('slideOutLeft')){
                    jQuery('.hidden_innerwrap').addClass('slideOutLeft');
                    jQuery('.hidden_innerwrap').hide(600);
               }
            }

        });

But with this also after clicking on the second icon this first one didn't work. How can solve this?

Upvotes: 0

Views: 53

Answers (1)

Ana DEV
Ana DEV

Reputation: 1030

Here is the code with what it works perfectly

jQuery('.contact_icon').click(function(){
            if(jQuery('#vinfo_sidebar').is(':visible')){
                    jQuery('#vinfo_sidebar').fadeOut(5);
            }
            if(!jQuery(".hidden_innerwrap").is(':visible')){
                jQuery(".hidden_innerwrap").removeClass('slideInLeft');
                if(!jQuery('.teenvoice_smalllogo img').hasClass('slideInLeft')){
                    jQuery('.teenvoice_smalllogo img').addClass('slideInLeft');
                    jQuery('.teenvoice_smalllogo img').show();
                }
                if(jQuery('.teenvoice_smalllogo img').hasClass('slideOutLeft')){
                    jQuery('.teenvoice_smalllogo img').removeClass('slideOutLeft');
                }
                if(jQuery('.hidden_innerwrap').hasClass('slideOutLeft')){
                     jQuery('.hidden_innerwrap').removeClass('slideOutLeft'); 
                     jQuery('.hidden_innerwrap').hide(600); 
                }
               if(!jQuery('.hidden_innerwrap').hasClass('slideInLeft')){
                    jQuery('.hidden_innerwrap').show();
                    jQuery('.hidden_innerwrap').addClass('slideInLeft');
               }  
            }else{
                if(jQuery('.teenvoice_smalllogo img').hasClass('slideInLeft')){
                    jQuery('.teenvoice_smalllogo img').removeClass('slideInLeft');
                }
               if(!jQuery('.teenvoice_smalllogo img').hasClass('slideOutLeft')){
                  jQuery('.teenvoice_smalllogo img').addClass('slideOutLeft');
                  jQuery('.teenvoice_smalllogo img').hide(); 
               }
               if(jQuery('.hidden_innerwrap').hasClass('slideInLeft')){
                   jQuery('.hidden_innerwrap').removeClass('slideInLeft');
                   jQuery('.hidden_innerwrap').hide(600);
               }
               if(!jQuery('.hidden_innerwrap').hasClass('slideOutLeft')){
                    jQuery('.hidden_innerwrap').addClass('slideOutLeft');
                    jQuery('.hidden_innerwrap').hide(600);
               }
            }

        });

        jQuery('.vinfo_icon').click(function(){
            if(jQuery('#hidden_sidebar').is(':visible')){
                    jQuery('#hidden_sidebar').fadeOut(5);
            }
            if(!jQuery('.hidden_vinfo_sidebarwrap').is(':visible')){
                jQuery(".hidden_vinfo_sidebarwrap").removeClass('slideInLeft');
                if(!jQuery('.teenvoice_smalllogo img').hasClass('slideInLeft')){
                    jQuery('.teenvoice_smalllogo img').addClass('slideInLeft');
                    jQuery('.teenvoice_smalllogo img').show();
                }
                if(jQuery('.teenvoice_smalllogo img').hasClass('slideOutLeft')){
                    jQuery('.teenvoice_smalllogo img').removeClass('slideOutLeft');
                }
                if(jQuery('.hidden_vinfo_sidebarwrap').hasClass('slideOutLeft')){
                     jQuery('.hidden_vinfo_sidebarwrap').removeClass('slideOutLeft'); 
                     jQuery('.hidden_vinfo_sidebarwrap').hide(600); 
                }
               if(!jQuery('.hidden_vinfo_sidebarwrap').hasClass('slideInLeft')){
                    jQuery('.hidden_vinfo_sidebarwrap').show();
                    jQuery('.hidden_vinfo_sidebarwrap').addClass('slideInLeft');
               } 
            }else{
                  if(jQuery('.teenvoice_smalllogo img').hasClass('slideInLeft')){
                        jQuery('.teenvoice_smalllogo img').removeClass('slideInLeft');
                    }
                   if(!jQuery('.teenvoice_smalllogo img').hasClass('slideOutLeft')){
                      jQuery('.teenvoice_smalllogo img').addClass('slideOutLeft');
                      jQuery('.teenvoice_smalllogo img').hide(); 
                   }
                   if(jQuery('.hidden_vinfo_sidebarwrap').hasClass('slideInLeft')){
                        jQuery('.hidden_vinfo_sidebarwrap').removeClass('slideInLeft');
                        jQuery('.hidden_vinfo_sidebarwrap').hide(600);
                    }
                    if(!jQuery('.hidden_vinfo_sidebarwrap').hasClass('slideOutLeft')){
                         jQuery('.hidden_vinfo_sidebarwrap').addClass('slideOutLeft');
                         jQuery('.hidden_vinfo_sidebarwrap').hide(600);
                    }
            }
        });

Upvotes: 1

Related Questions