Laravel - PHP - Невозможно переключить две формы в одном представлении

У меня единственный вид dashboard.blade.php.

У него несколько форм. Я установил атрибут данных data-toggle='collapse в элементе <a>.

Это работает правильно для одной формы при использовании метода стрелка вниз на клавиатуре.

При повторном нажатии на этот arrow первая форма скроется из поля зрения.

Однако, когда я нажимаю на второй <a>, когда первая форма уже открыта, обе формы отображаются одновременно.

Мне нужно управлять этим, чтобы отображать форму один за раз и Спрятать другую форму, щелкнув следующую форму.

Ниже мой код (dashboard.blade.php).

Первая форма:

<div class = "panel">
    <div class = "panel-heading" role = "tab" id = "headingTwo">
        <h4 class = "panel-title">
            <a data-toggle = "collapse"
               data-parent = "#accordion3"
               href = "#collapseTwo3"
               aria-expanded = "false"
               aria-controls = "collapseTwo3"
               data-expandable = "false"><i class = "material-icons pmd-sm pmd-accordion-icon-left">toys</i>Brands
                <i class = "material-icons md-dark pmd-sm pmd-accordion-arrow">keyboard_arrow_down</i></a>
        </h4>
    </div>
    <div id = "collapseTwo3" class = "panel-collapse collapse" role = "tabpanel" aria-labelledby = "headingTwo">
        <div class = "panel-body">
            <form class = "form-horizontal"
                  method = "post"
                  enctype = "multipart/form-data"
                  action = "{{ url('importBrands') }}">

                {{ csrf_field() }}

                <div class = "form-group files">
                    <label>Upload Your File</label>
                    <input type = "file" name = "import_file" />
                </div>
                <div align = "right">
                    <!-- <button class = "btn btn-primary">Export</button> -->
                    <button class = "btn btn-primary">Import</button>
                </div>
            </form>
        </div>
    </div>
</div>

Вторая форма:

<div class = "panel">
    <div class = "panel-heading" role = "tab" id = "headingThree">
        <h4 class = "panel-title">
            <a data-toggle = "collapse"
               data-parent = "#accordion3"
               href = "#collapseThree3"
               aria-expanded = "false"
               aria-controls = "collapseThree3"
               data-expandable = "false"><i class = "material-icons pmd-sm pmd-accordion-icon-left">category</i>Categories
                <i class = "material-icons md-dark pmd-sm pmd-accordion-arrow">keyboard_arrow_down</i></a>
        </h4>
    </div>
    <div id = "collapseThree3" class = "panel-collapse collapse" role = "tabpanel" aria-labelledby = "headingThree">
        <div class = "panel-body">
            <form class = "form-horizontal"
                  method = "post"
                  enctype = "multipart/form-data"
                  action = "{{ url('importCategories') }}">

                {{ csrf_field() }}

                <div class = "form-group files">
                    <label>Upload Your File</label>
                    <input type = "file" name = "import_file" />
                </div>
                <div align = "right">
                    <!-- <button class = "btn btn-primary">Export</button> -->
                    <button class = "btn btn-primary">Import</button>
                </div>
            </form>
        </div>
    </div>
</div>

material.js

var FloatingLabel = function ($$$1) {
    // constants >>>
    var DATA_KEY = 'md.floatinglabel';
    var EVENT_KEY = "." + DATA_KEY;
    var NAME = 'floatinglabel';
    var NO_CONFLICT = $$$1.fn[NAME];
    var ClassName = {
      IS_FOCUSED: 'is-focused',
      HAS_VALUE: 'has-value'
    };
    var Event = {
      CHANGE: "change" + EVENT_KEY,
      FOCUSIN: "focusin" + EVENT_KEY,
      FOCUSOUT: "focusout" + EVENT_KEY
    };
    var Selector = {
      DATA_PARENT: '.floating-label',
      DATA_TOGGLE: '.floating-label .custom-select, .floating-label .form-control' // <<< constants

    };

    var FloatingLabel =
    /*#__PURE__*/
    function () {
      function FloatingLabel(element) {
        this._element = element;
        this._parent = $$$1(element).closest(Selector.DATA_PARENT)[0];
      }

      var _proto = FloatingLabel.prototype;

      _proto.change = function change() {
        if ($$$1(this._element).val() || $$$1(this._element).is('select') && $$$1('option:first-child', $$$1(this._element)).html().replace(' ', '') !== '') {
          $$$1(this._parent).addClass(ClassName.HAS_VALUE);
        } else {
          $$$1(this._parent).removeClass(ClassName.HAS_VALUE);
        }
      };

      _proto.focusin = function focusin() {
        $$$1(this._parent).addClass(ClassName.IS_FOCUSED);
      };

      _proto.focusout = function focusout() {
        $$$1(this._parent).removeClass(ClassName.IS_FOCUSED);
      };

      FloatingLabel._jQueryInterface = function _jQueryInterface(event) {
        return this.each(function () {
          var _event = event ? event : 'change';

          var data = $$$1(this).data(DATA_KEY);

          if (!data) {
            data = new FloatingLabel(this);
            $$$1(this).data(DATA_KEY, data);
          }

          if (typeof _event === 'string') {
            if (typeof data[_event] === 'undefined') {
              throw new Error("No method named \"" + _event + "\"");
            }

            data[_event]();
          }
        });
      };

      return FloatingLabel;
    }();

    $$$1(document).on(Event.CHANGE + " " + Event.FOCUSIN + " " + Event.FOCUSOUT, Selector.DATA_TOGGLE, function (event) {
      FloatingLabel._jQueryInterface.call($$$1(this), event.type);
    });
    $$$1.fn[NAME] = FloatingLabel._jQueryInterface;
    $$$1.fn[NAME].Constructor = FloatingLabel;

    $$$1.fn[NAME].noConflict = function () {
      $$$1.fn[NAME] = NO_CONFLICT;
      return FloatingLabel._jQueryInterface;
    };

    return FloatingLabel;
  }($);