Закройте другие панели перед открытием еще

Question

Я огляделся вокруг, и я не могу найти или понять это. Возможно, я что-то видел, но не знал, как интегрировать его в то, что у меня есть ... Я не уверен. Я решил проглотить свою гордость и спросить. Я новичок в Javascript/jquery, и я застрял.

Я создал ряд кнопок, которые все слайд-шоу панели. У меня есть все кнопки, которые работают правильно, и одна вещь отсутствует. Я бы хотел, чтобы только одна панель была открыта одновременно. Итак, если одна панель была открыта, и я нажал другую кнопку, открытая панель будет сдвигатьUp, а следующая будет slideDown.

Если мои скрипты немного шероховаты, любая критика также очень ценится.

спасибо.

ссылка на сайт http://greenmountainfarmtoschool.org/dev_site/

И мой JQuery:

jQuery(function ($) { 

    $(document).ready(function() { 

     $(function() { 
      $('.action-btn').on('click', function() { 
       var sliderID = $(this).attr('data-sliderid'); 
       if ($('.' + sliderID).is(":hidden")) { 
        $('.' + sliderID).slideDown("slow"); 
       } 
       if($(div).hasClass('down')) { 
        .slideUp("slow"); 
       } 
       else { 
        $('.' + sliderID).slideUp("slow"); 
       } 
      }); 
     }); 

    });//end of docready 

    $(window).load(function() { });//end of windowload 

});//end of $ block 

Answer 1

JQuery (функция ($) {

$(document).ready(function() { 

    $(function() { 
     $('.action-btn').on('click', function() { 
      /** 
      * since all the sliders are also in a 'wrapper' class, just 
      * slideUp all the wrapper, then slideDown the one you want. 
      */ 
      $('wrapper').slideUp("slow"); 

      var sliderID = $(this).attr('data-sliderid'); 
      if ($('.' + sliderID).is(":hidden")) { 
       $('.' + sliderID).slideDown("slow"); 
      } 
      if($(div).hasClass('down')) { 
       .slideUp("slow"); 
      } 
      else { 
       $('.' + sliderID).slideUp("slow"); 
      } 
     }); 
    }); 

});//end of docready 

$(window).load(function() { });//end of windowload 

});//end of $ block 

Другой подход заключается в использовании вкладок JQuery UI и просто настройте их, поскольку они уже реализуют поведение, которое вы хотите.

Answer 2

Итак, ferr Глядя и узнавая о пользовательском интерфейсе jQuery Tab, я не мог понять, как заставить его работать на то, что я пытался сделать. Итак, друг и я поняли этот фрагмент кода. Думал, что я разместил его для других, возможно, для использования. Надеюсь, это когда-нибудь поможет кому-то.

HTML:

<div class="section group"> 
<div class="col span_1_of_4 sub-btn hvr-reveal action-btn centerText" data-sliderid="ourPurposeSlider"> 
    <h3>Our Purpose</h3> 
</div> 
<div class="col span_1_of_4 sub-btn hvr-reveal action-btn centerText" data-sliderid="whereWeWorkSlider"> 
    <h3>Where We Work</h3> 
</div> 
<div class="col span_1_of_4 sub-btn hvr-reveal action-btn centerText" data-sliderid="staffSlider"> 
    <h3>Meet the Staff</h3> 
</div> 
<div class="col span_1_of_4 sub-btn hvr-reveal action-btn centerText" data-sliderid="boardSlider"> 
    <h3>Meet the Board</h3> 
</div> 

JQuery:

$(function() { 
     $('.action-btn').on('click', function() { 
      var sliderID = $(this).attr('data-sliderid'); 


      if($('.active')[0] && !$('.' + sliderID).hasClass("active")){ 
       $('.active').slideUp("slow", function(){ 
        $(this).removeClass('active'); 
        $('.' + sliderID).slideDown("slow").addClass("active"); 
       }); 
      }else if($('.active')[0] && $('.' + sliderID).hasClass("active")){ 
       $('.' + sliderID).slideUp("slow").removeClass("active"); 
      }else{ 
       $('.' + sliderID).slideDown("slow").addClass("active"); 
      };    

     }); 
    });