CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3756781
user3756781

Reputation: 179

Closing an active div when clicking a secondary button

I am having issues in closing the active div in my site. When I click menu you will see that a menu panel will slide from the left of the screen. As of now the only way to close it would be to click the x button. But I also have the ability for when you click footer a div will slide up from the bottom. Everything works, but the problem I am having is when the menu is open and you click footer the div will cover the menu instead of closing the menu. Same goes the other way around, when the footer is open and you click menu it will open up as well instead of closing the footer.

I would like for one div to open while closing the other open div. How would go about doing this? Here is the JS and the full code of the site http://jsfiddle.net/8en2D/21/

  $(function(){
        window.status=0;
  $('#menu').click(function(){
        if(window.status==0){
              $('#slidingMenu').stop().animate({left:'0px'},500); 
                    window.status=1;
              $('body, html').css('overflow','hidden');
 }
        else{
              $('#slidingMenu').stop().animate({left:'-100%'},500);
                    window.status=0;
              $('body, html').css('overflow-y','scroll');
           }
 });
 })

 /* 1. FOOTER SLIDEUP
 -----------------------------------------------------------------------------------------------
  ===============================================================================================*/
 //Close menu when you click Footer

  $('#more').click(function () {
        var open = $('header').is('.open');
              $('#dropFooter')['slide' + (open ? 'Up' : 'Down')](400);
              $('header').animate({
                    bottom: (open ? '-' : '+') + '=200'
                }, 400, function () {
  $('header').toggleClass('open');
 });
 });

  $('#menu').click(function () {
        if ($('').is('.open')) {
              $('')
                .removeClass('open')
                .animate({
                'bottom': "-=200"
 }, function () {
        var $footer = $('.activetoggle');

        if ($footer.length) 
            $footer
                .toggleClass('activetoggle footerButton')
                .text('Footer');
 });
    $('footer').slideUp(400);
     }
 });



  $('.footerButton').click(function () {// Change wording once pressed
        var $this = $(this);
  $this.toggleClass('footerButton');
        if ($this.hasClass('footerButton')) {
  $this.text('Footer');
      } else {
    $this.text('Close');
 }
  $(this).toggleClass('activetoggle');
 });

  $(window).resize(function(){ //check when window resize
        if($(window).width() < 780){ // check when the window width is less than 780 
        if ($('header').is('.open')) { 
              $('header')
                .removeClass('open')
                .animate({
                'bottom': "-=200"                
      });
    $footer = $('.activetoggle');
    if ($footer.length) {
         $footer.toggleClass('activetoggle footerButton').text('Footer');
    }
    $('#dropFooter').slideToggle(400);
 }
 }

 });

Upvotes: 1

Views: 462

Answers (1)

JRulle
JRulle

Reputation: 7568

I was able to tweak your jQuery a bit to make this work. See jsfiddle here. Below I have put the two main functions that I modified.

$('#menu').click(function () {
//new jquery
        if ($('header').is('.open')) {
            var open = $('header').is('.open');
            $('#dropFooter')['slide' + (open ? 'Up' : 'Down')](400);
            $('header').animate({
                bottom: (open ? '-' : '+') + '=200'
            }, 400, function () {
                $('header').removeClass('open');
            });
            if ($('.navFooter button').hasClass('activetoggle')) {
                $('.navFooter button').removeClass('activetoggle').addClass('footerButton').text('Footer');
            }
        }
//back to your exisitng code
        if (window.status == 0) {
            $('#slidingMenu').stop().animate({
                left: '0px'
            }, 500);
            window.status = 1;
            $('body, html').css('overflow', 'hidden');
            $('#slidingMenu').addClass('open');
        } else {
            $('#slidingMenu').stop().animate({
                left: '-100%'
            }, 500);
            window.status = 0;
            $('body, html').css('overflow-y', 'scroll');
            $('#slidingMenu').removeClass('open');
        }
    });

$('#more').click(function () {
//new jquery
    if ($('#slidingMenu').is('.open')) {
        $('#slidingMenu').stop().animate({
            left: '-100%'
        }, 500);
        window.status = 0;
        $('body, html').css('overflow-y', 'scroll');
        $('#slidingMenu').removeClass('open');
    }
//back to existing code
    var open = $('header').is('.open');
    $('#dropFooter')['slide' + (open ? 'Up' : 'Down')](400);
    $('header').animate({
        bottom: (open ? '-' : '+') + '=200'
    }, 400, function () {
        $('header').toggleClass('open');
    });
});

The list of issues that contributed to your problem is pretty long and I am fairly certain you still have some extraneous code in the fiddle that is still unnecessary.

  • Multiple .click() functions - all of your code for the click event of an element should do in one function
  • Missing or incorrect jQuery selectors - in one area I found $('')
  • Lacked a notification class that the menu was open (you had this implemented for the footer (which was called header)

Upvotes: 1

Related Questions