CODEWITHSUNDEEP
javascripthtmlcss
Lance27
Lance27

Reputation: 13

Make accordions closed by default

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

Upvotes: 1

Views: 268

Answers (1)

DJ Burb
DJ Burb

Reputation: 2364

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
    );
  };
$(".panel-collapse").collapse("hide"); 
$("#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");
  });
});

Upvotes: 1

Related Questions