Published 09 Aug, 2022

Jquery - Trying to build a toggle button that will show and hide a div box using bootstrap and jquery

Category Jquery
Modified : Nov 25, 2022
72

I am trying to build a feature into my site where I have a toggle button. When the button is depressed a div should show and when the button is normal, the div should be invisible. There is also a close 'X' on the div itself, which, if clicked, should make the button normal (ie not depressed)

The problem is that I don't know how to un-activate the button. I can remove the class active, which updates the DOM, but it comes back from somewhere within bootstrap (Chrome breakpoint on DOM change showed me a stack trace)

Here is my code:

  var addInputButton = function(id, txt, clk) {
  var btn = $('<a>')
      .text(txt)
      .attr("id", id)
      .addClass("btn")
      .addClass("btn-mini")
      .attr("data-toggle", "button")
      //.addClass("btn-info")
      .click(clk);
  $('#input_help_section')
    .append(btn);
  return btn;
};

// CHEATSHEET -----------------
(function() {
  var toggleName = "markdownCheatSheetIsVisible";
  var btnId = "markdownCheatsheetToggleButton";
  var box = $("#markdownCheatsheet");

  var showBox = function() {
    var cheatSheetButton = $('#' + btnId);
    if (!cheatSheetButton.hasClass("active")) {
      cheatSheetButton.toggle();
      cheatSheetButton.show();
    }
    box.show();
  };

  var hideBox = function() {
    var cheatSheetButton = $('#' + btnId);
    if (cheatSheetButton.hasClass("active")) {
      cheatSheetButton.toggle();
      cheatSheetButton.show();
    }
    box.hide();
  };

  addInputButton(btnId, "Markdown cheatsheet", function(event) { 
    if ($('#' + btnId).hasClass("active") === false) {
      showBox();
    } else {
      hideBox();
    }
  });

  $("#markdownCheatsheetClose").click(function() {
    hideBox();
  });

  // start shown
  showBox();

})();

There are a bunch of odd things here:

  • I tried to do addClass('active') and removeClass('active') in the showBox and hideBox functions, but a trigger somewhere in bootstrap kept on adding the active class back after I removed it.
  • The toggle method is defined in bootstrap and as far as I can figure it out is meant to toggle the active class, but it also hides it (somewhere) and I can't toggle it away from an active state, which I don't quite understand.

Answers

There are 2 suggested solutions here and each one has been listed below with a detailed description. The following topics have been covered briefly such as Jquery, Twitter Bootstrap. These have been categorized in sections for a clear and precise explanation.

47

I think periklis was right on track that you had a few to many toggle modifiers.

I created a jsfiddle.net example here as you were missing a couple small html tags to get your code to work. See http://jsfiddle.net/WHXbm/

In a nutshell here are the changes:

Remove from addInputButton:

.attr("data-toggle", "button")

Remove from showBox()

if (!cheatSheetButton.hasClass("active")) {
      cheatSheetButton.toggle();
      cheatSheetButton.show();
}

Add to showBox()

$("#markdownCheatsheetToggleButton").addClass("active");

Remove from hideBox()

if (cheatSheetButton.hasClass("active")) {
      cheatSheetButton.toggle();
      cheatSheetButton.show();
}

Add to hideBox()

$("#markdownCheatsheetToggleButton").removeClass("active");

24

I found a solution that doesn't require Javascript:

<div class="btn-group" data-toggle="buttons-checkbox">
    <a class="btn collapse-data-btn" data-toggle="collapse" href="#details">Show details</a>
</div>
<div id="details" class="collapse">
    <p>Details details details details details details details details...</p>
</div>