SlideUp/Slidedown - Button is child of closing div and doesn'trigger parent

261 views Asked by At

I have a little slideup, slidedown system. width some fading in it. Everything works fine, except from the slide up function. That does not seem to change the display back to none.

Here is a Fiddle: Slide Up/Down Fiddle

HTML

   <div class="standorte-m-wrapper">
      <div class="panel-m up">
        <div class="pan-item-m">
          <div class="adres-wrap-m">
            <button  class="mobile" data-ajaxFile="0">ZU-1
            <i class="icon-down-open-2 iset"></i></button>
        </div> 
    </div><!--
    --><div class="pan-item-m">
        <div class="adres-wrap-m">
            <button  class="mobile" data-ajaxFile="1">ZU-2<i class="icon-down-open-2 iset"></i></button>
        </div>
    </div><!--
    --><div class="pan-item-m">
        <div class="adres-wrap-m">
            <button  class="mobile" data-ajaxFile="2">BS<i class="icon-down-open-2 iset"></i></button>
        </div>
    </div><!--
    --><div class="pan-item-m">
        <div class="adres-wrap-m">
            <button  class="mobile" data-ajaxFile="3">LU<i class="icon-down-open-2 iset"></i></button>
        </div>
    </div>
</div>
<div id="open" class="panel-m down">
    <div class="close-button">
        <a href="#" id="close-m" class="close"><i class="icon-cancel"></i></a>
    </div>
    <div id="content">
        <div id="php-content-m"></div>
    </div>
</div>

JS

    $('.adres-wrap-m > button').on('click', function() {
     if ($('.panel-m.up').hasClass('open')) {
     //alert('already open');
     } else {
     $('.panel-m.up').addClass('open');
     $('.standorte-m-wrapper').addClass('expand');
     $('.panel-m.down').slideDown(1000);
     }
     $('#php-content-m').html(ajaxFiles[$(this).attr('data-ajaxFile')]);
     setTimeout(function (){
     $('.panel-m.down div').fadeIn(400);
     }, 500);
     });
     $('#close-m').on('click', function() {
     $('.panel-m.down div').fadeOut(400);
     setTimeout(function (){
     $('.panel-m.up').removeClass('open');
     $('.standorte-m-wrapper').removeClass('expand');
     $('#close-m').parent().css("display", "block");
     $('.pannel-m.down').slideUp(1000);
     }, 500);
     });
     });
1

There are 1 answers

3
Zack W On BEST ANSWER

Looks like you have a typo in $('#close-m').on('click', function()

Change $('.pannel-m.down').slideUp(1000); to $('.panel-m.down').slideUp(1000);

Worked for me