Make accordions closed by default

Issue

Similar to this on this one, instead of a button that collapses all of them. Just collapsed on default when the file is opened.

Solution

In the JS place the code $(".panel-collapse").collapse("hide"); above the "#accordion_search_bar" section. This way it will just tell the DOM to close all the panels

    $(function() {
      var searchTerm, panelContainerId;
      // Create a new contains that is case insensitive
      $.expr[":"].containsCaseInsensitive = function(n, i, m) {
        return (
          jQuery(n)
            .text()
            .toUpperCase()
            .indexOf(m[3].toUpperCase()) >= 0
        );
      };
      $("#accordion_search_bar").on("change keyup paste click", function() {
        searchTerm = $(this).val();
        $("#accordion > .panel").each(function() {
          panelContainerId = "#" + $(this).attr("id");
          $(
            panelContainerId + ":not(:containsCaseInsensitive(" + searchTerm + "))"
          ).hide();
          $(
            panelContainerId + ":containsCaseInsensitive(" + searchTerm + ")"
          ).show();
        });
      });
    
      $(".btn-expand-all").on("click", function() {
        $(".panel-collapse").collapse("show");
      });
      $(".btn-collapse-all").on("click", function() {
        $(".panel-collapse").collapse("hide");
      });
    });

$(".panel-collapse").collapse("hide"); <-- do this

Answered By – DJ Burb

Answer Checked By – Terry (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.