collapse для html

156
11 июля 2019, 14:00

Есть html-страница, сохраненная из браузера. На ней используется collapse(аккордеон). Помимо этого аккордеона js содержит другие ненужные библиотеки (flexslider, popover и т.д.). Уже битый час пытаюсь в этом js оставить только аккордеон, но ничего не получается - убираю лишний код, но постоянно вылазят ошибки. Может кто-то сможет помочь оставить в коде только collapse?

t("./vendor/bootstrap/collapse.js"), 

Ссылка на jsfiddle

Answer 1

На странице https://getbootstrap.com/docs/3.4/customize/ оставить галки только у collapse и нажать кнопку внизу страницы.
В скачанном архиве будет bootstrap.min.js и bootstrap.js. Их и можно использовать.

/*! 
 * Generated using the Bootstrap Customizer (https://getbootstrap.com/docs/3.4/customize/) 
 */ 
 
/*! 
 * Bootstrap v3.4.0 (https://getbootstrap.com/) 
 * Copyright 2011-2018 Twitter, Inc. 
 * Licensed under the MIT license 
 */ 
 
if (typeof jQuery === 'undefined') { 
  throw new Error('Bootstrap\'s JavaScript requires jQuery') 
} 
+function ($) { 
  'use strict'; 
  var version = $.fn.jquery.split(' ')[0].split('.') 
  if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 3)) { 
    throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4') 
  } 
}(jQuery); 
 
/* ======================================================================== 
 * Bootstrap: collapse.js v3.4.0 
 * https://getbootstrap.com/docs/3.4/javascript/#collapse 
 * ======================================================================== 
 * Copyright 2011-2018 Twitter, Inc. 
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 
 * ======================================================================== */ 
 
/* jshint latedef: false */ 
 
+function ($) { 
  'use strict'; 
 
  // COLLAPSE PUBLIC CLASS DEFINITION 
  // ================================ 
 
  var Collapse = function (element, options) { 
    this.$element      = $(element) 
    this.options       = $.extend({}, Collapse.DEFAULTS, options) 
    this.$trigger      = $('[data-toggle="collapse"][href="#' + element.id + '"],' + 
                           '[data-toggle="collapse"][data-target="#' + element.id + '"]') 
    this.transitioning = null 
 
    if (this.options.parent) { 
      this.$parent = this.getParent() 
    } else { 
      this.addAriaAndCollapsedClass(this.$element, this.$trigger) 
    } 
 
    if (this.options.toggle) this.toggle() 
  } 
 
  Collapse.VERSION  = '3.4.0' 
 
  Collapse.TRANSITION_DURATION = 350 
 
  Collapse.DEFAULTS = { 
    toggle: true 
  } 
 
  Collapse.prototype.dimension = function () { 
    var hasWidth = this.$element.hasClass('width') 
    return hasWidth ? 'width' : 'height' 
  } 
 
  Collapse.prototype.show = function () { 
    if (this.transitioning || this.$element.hasClass('in')) return 
 
    var activesData 
    var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing') 
 
    if (actives && actives.length) { 
      activesData = actives.data('bs.collapse') 
      if (activesData && activesData.transitioning) return 
    } 
 
    var startEvent = $.Event('show.bs.collapse') 
    this.$element.trigger(startEvent) 
    if (startEvent.isDefaultPrevented()) return 
 
    if (actives && actives.length) { 
      Plugin.call(actives, 'hide') 
      activesData || actives.data('bs.collapse', null) 
    } 
 
    var dimension = this.dimension() 
 
    this.$element 
      .removeClass('collapse') 
      .addClass('collapsing')[dimension](0) 
      .attr('aria-expanded', true) 
 
    this.$trigger 
      .removeClass('collapsed') 
      .attr('aria-expanded', true) 
 
    this.transitioning = 1 
 
    var complete = function () { 
      this.$element 
        .removeClass('collapsing') 
        .addClass('collapse in')[dimension]('') 
      this.transitioning = 0 
      this.$element 
        .trigger('shown.bs.collapse') 
    } 
 
    if (!$.support.transition) return complete.call(this) 
 
    var scrollSize = $.camelCase(['scroll', dimension].join('-')) 
 
    this.$element 
      .one('bsTransitionEnd', $.proxy(complete, this)) 
      .emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize]) 
  } 
 
  Collapse.prototype.hide = function () { 
    if (this.transitioning || !this.$element.hasClass('in')) return 
 
    var startEvent = $.Event('hide.bs.collapse') 
    this.$element.trigger(startEvent) 
    if (startEvent.isDefaultPrevented()) return 
 
    var dimension = this.dimension() 
 
    this.$element[dimension](this.$element[dimension]())[0].offsetHeight 
 
    this.$element 
      .addClass('collapsing') 
      .removeClass('collapse in') 
      .attr('aria-expanded', false) 
 
    this.$trigger 
      .addClass('collapsed') 
      .attr('aria-expanded', false) 
 
    this.transitioning = 1 
 
    var complete = function () { 
      this.transitioning = 0 
      this.$element 
        .removeClass('collapsing') 
        .addClass('collapse') 
        .trigger('hidden.bs.collapse') 
    } 
 
    if (!$.support.transition) return complete.call(this) 
 
    this.$element 
      [dimension](0) 
      .one('bsTransitionEnd', $.proxy(complete, this)) 
      .emulateTransitionEnd(Collapse.TRANSITION_DURATION) 
  } 
 
  Collapse.prototype.toggle = function () { 
    this[this.$element.hasClass('in') ? 'hide' : 'show']() 
  } 
 
  Collapse.prototype.getParent = function () { 
    return $(document).find(this.options.parent) 
      .find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]') 
      .each($.proxy(function (i, element) { 
        var $element = $(element) 
        this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element) 
      }, this)) 
      .end() 
  } 
 
  Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) { 
    var isOpen = $element.hasClass('in') 
 
    $element.attr('aria-expanded', isOpen) 
    $trigger 
      .toggleClass('collapsed', !isOpen) 
      .attr('aria-expanded', isOpen) 
  } 
 
  function getTargetFromTrigger($trigger) { 
    var href 
    var target = $trigger.attr('data-target') 
      || (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7 
 
    return $(document).find(target) 
  } 
 
 
  // COLLAPSE PLUGIN DEFINITION 
  // ========================== 
 
  function Plugin(option) { 
    return this.each(function () { 
      var $this   = $(this) 
      var data    = $this.data('bs.collapse') 
      var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option) 
 
      if (!data && options.toggle && /show|hide/.test(option)) options.toggle = false 
      if (!data) $this.data('bs.collapse', (data = new Collapse(this, options))) 
      if (typeof option == 'string') data[option]() 
    }) 
  } 
 
  var old = $.fn.collapse 
 
  $.fn.collapse             = Plugin 
  $.fn.collapse.Constructor = Collapse 
 
 
  // COLLAPSE NO CONFLICT 
  // ==================== 
 
  $.fn.collapse.noConflict = function () { 
    $.fn.collapse = old 
    return this 
  } 
 
 
  // COLLAPSE DATA-API 
  // ================= 
 
  $(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) { 
    var $this   = $(this) 
 
    if (!$this.attr('data-target')) e.preventDefault() 
 
    var $target = getTargetFromTrigger($this) 
    var data    = $target.data('bs.collapse') 
    var option  = data ? 'toggle' : $this.data() 
 
    Plugin.call($target, option) 
  }) 
 
}(jQuery); 
 
/* ======================================================================== 
 * Bootstrap: transition.js v3.4.0 
 * https://getbootstrap.com/docs/3.4/javascript/#transitions 
 * ======================================================================== 
 * Copyright 2011-2018 Twitter, Inc. 
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 
 * ======================================================================== */ 
 
 
+function ($) { 
  'use strict'; 
 
  // CSS TRANSITION SUPPORT (Shoutout: https://modernizr.com/) 
  // ============================================================ 
 
  function transitionEnd() { 
    var el = document.createElement('bootstrap') 
 
    var transEndEventNames = { 
      WebkitTransition : 'webkitTransitionEnd', 
      MozTransition    : 'transitionend', 
      OTransition      : 'oTransitionEnd otransitionend', 
      transition       : 'transitionend' 
    } 
 
    for (var name in transEndEventNames) { 
      if (el.style[name] !== undefined) { 
        return { end: transEndEventNames[name] } 
      } 
    } 
 
    return false // explicit for ie8 (  ._.) 
  } 
 
  // https://blog.alexmaccaw.com/css-transitions 
  $.fn.emulateTransitionEnd = function (duration) { 
    var called = false 
    var $el = this 
    $(this).one('bsTransitionEnd', function () { called = true }) 
    var callback = function () { if (!called) $($el).trigger($.support.transition.end) } 
    setTimeout(callback, duration) 
    return this 
  } 
 
  $(function () { 
    $.support.transition = transitionEnd() 
 
    if (!$.support.transition) return 
 
    $.event.special.bsTransitionEnd = { 
      bindType: $.support.transition.end, 
      delegateType: $.support.transition.end, 
      handle: function (e) { 
        if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments) 
      } 
    } 
  }) 
 
}(jQuery);
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" integrity="sha384-PmY9l28YgO4JwMKbTvgaS7XNZJ30MK9FAZjjzXtlqyZCqBY6X6bXIkM++IkyinN+" crossorigin="anonymous"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
  Link with href 
</a> 
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
  Button with data-target 
</button> 
<div class="collapse" id="collapseExample"> 
  <div class="well"> 
    ... 
  </div> 
</div>

READ ALSO
include кусков html кода в файл index.html

include кусков html кода в файл index.html

В репозитории responsive-components есть файл indexhtml, в котором с помощью конструкций:

144
Выполнить редирект при наличии ссылки

Выполнить редирект при наличии ссылки

На странице вывода статей может появляться следующий код, с классом redirectTextКак автоматически на php выполнить редирект на ссылку, если она...

147
Проблема с кодировкой JS-файла

Проблема с кодировкой JS-файла

пишу скрипт для себя, но столкнулся с проблемой отображения кириллических символов в браузере Google ChromeВыглядит примерно следующим образом

125
Разный id в компоненте b-form-checkbox (Nuxt js + Bootstrap Vue)

Разный id в компоненте b-form-checkbox (Nuxt js + Bootstrap Vue)

Есть главная страница, в ней лежит компонент формы с id="123":

145