超级简单的jQuery选项卡 - 没有UI - 在页面加载时崩溃

Question

I'd like all tabs to be collapsed on page load. Right now the first one is open by default:

  $(document).ready(function($) {
    $('#forms').find('.forms-toggle').click(function(){

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');

      //Hide the other panels
      $(".forms-content").not($(this).next()).slideUp('fast');

    });
  });

HTML and CSS are here:

https://jsfiddle.net/re8x8cx3/

Answer 1

Place this inside dom ready,

 $(".forms-content").hide();

Then the code will be,

$(document).ready(function($) {
  $(".forms-content").hide();
  $('#forms').find('.forms-toggle').click(function() {
    //Expand or collapse this panel
    $(this).next().slideToggle('fast');
    //Hide the other panels
    $(".forms-content").not($(this).next()).slideUp('fast');
  });
});

Fiddle

Answer 2

Please also improve you JS:

(function($){
    //store reusable global vars
    var $forms = $('#forms'),
        $formContents = $forms.find(".forms-content");

    //hide on load
    $formContents.hide();

    //attach only on handler to #forms instead of to every tab separately
    $forms.on('click', '.forms-toggle', function(event){
        event.preventDefault();

        //reuse this value (only on reference)
        var $thisContent = $(this).next(),

        //Expand or collapse this panel
        $thisContent.slideToggle('fast');

        //Hide the other panels
        $formContents.not($thisContent).slideUp('fast');
    });
});