All geek questions in one place

How to switch content display using multiple Bootstrap 4 display classes

I'm struggling to find a clean way to click on the sidebar navigation when using multiple Bootstrap 4 display classes due to their use! important.

For example, here is an example div using display classes, I want to enable display.

<div class="module-name d-none d-lg-block sb-collapsable">
     {{module_name}}
</div>>

I may be very tight right now, but I can’t find a clean way to switch this display because both the d-none and d-lg-block classes use the mapping: none / block! important. The sb-collapsable class exists as an assistant to find all the things I want to hide in jQuery. I would really appreciate any help. I tried a lot of different things and looked for similar problems and came up with nothing.

Edit: I have to add that not every div using the sb-collapsable class has the same classes on it. Here is another example. I need to switch the visibility of both this and another div without knowing the display state before JS will be executed ideally.

<a class="d-block d-lg-none brand bg-dark sb-collapsable" href="#">XXX</a>
+4
source share
1 answer

I stumbled upon the same problem and coded for it a simple solution called bs4_display.js(full code on this gist ). When hiding elements, it swaps classes d-*-blockfor fictitious ones, for example dummy-*-block. If later you decide to show this element, it does the opposite, restoring the original classes. Full working example in jsbin . API:

bs4Display.show([HTMLelement]);
bs4Display.hide([HTMLelement]);
bs4Display.reset([HTMLelement]);


(function(window){
  'use strict';

  // wrapper
  function bs4Display() {
    var _bs4Display = {};

    _bs4Display.DUMMY_PREFIX = 'dummy'

    // private methods
    _bs4Display._build_block_classes = function () {
      if (_bs4Display._displayBlocks) {
        return _bs4Display._displayBlocks;
      }
      var prefix = _bs4Display.DUMMY_PREFIX;
      _bs4Display._blockArray = [
        ['d-block',    prefix + '-block'],
        ['d-sm-block', prefix + '-sm-block'],
        ['d-md-block', prefix + '-md-block'],
        ['d-lg-block', prefix + '-lg-block'],
        ['d-xl-block', prefix + '-xl-block']
      ];
      _bs4Display._noneArray = [
        [prefix + '-none',    'd-none'],
        [prefix + '-sm-none', 'd-sm-none'],
        [prefix + '-md-none', 'd-md-none'],
        [prefix + '-lg-none', 'd-lg-none'],
        [prefix + '-xl-none', 'd-xl-none']
      ];
      _bs4Display._displayBlocks = _bs4Display._blockArray.concat(_bs4Display._noneArray);
      return _bs4Display._displayBlocks;
    }

    if (typeof(document.querySelector('body').classList.replace) !== 'undefined') {
      // native replace
      _bs4Display._replace = function (el, oldClass, newClass) {
        return el.classList.replace(oldClass, newClass);
      }
    } else {
      // polyfill, since support is not great:
      // https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility
      _bs4Display._replace = function (el, oldClass, newClass) {
        if (el.classList.contains(oldClass)) {
          el.classList.remove(oldClass);
          el.classList.add(newClass);
        }
      }
    }

    // public methods
    /**
     * Hides a HTML element with BootStrap 4 markup
     * @param {Element|[Element]} els - HTML element(s) to hide.
     */
    _bs4Display.hide = function (els) {
      if (!els) { return; }  // nothing to hide
      if (!(els instanceof Array)) { els = [els]; }
      var dBlocks = _bs4Display._build_block_classes();
      for (var k = 0; k < els.length; k++) {
        for (var i = 0; i < dBlocks.length; i++) {
          _bs4Display._replace(els[k], dBlocks[i][0], dBlocks[i][1]);
        }
        els[k].style.display = 'none';
      }
    }

    /**
     * Shows a HTML element with BootStrap 4 markup
     * @param {Element|[Element]} els - HTML element(s) to show.
     */
    _bs4Display.show = function (els) {
      if (!els) { return; }  // nothing to show
      if (!(els instanceof Array)) { els = [els]; }
      var dBlocks = _bs4Display._build_block_classes();
      for (var k = 0; k < els.length; k++) {
        for (var i = 0; i < dBlocks.length; i++) {
          _bs4Display._replace(els[k], dBlocks[i][1], dBlocks[i][0]);
        }
        els[k].style.display = '';
      }
    }

    /**
     * Restores the HTML elements original display classes
     * @param {Element|[Element]} els - HTML element(s) to reset.
     */
    _bs4Display.reset = function (els) {
      if (!els) { return; }  // nothing to show
      if (!(els instanceof Array)) { els = [els]; }
      _bs4Display._build_block_classes();
      for (var k = 0; k < els.length; k++) {
        for (var i = 0; i < _bs4Display._blockArray.length; i++) {
          _bs4Display._replace(els[k], _bs4Display._blockArray[i][1], _bs4Display._blockArray[i][0]);
          _bs4Display._replace(els[k], _bs4Display._noneArray[i][0], _bs4Display._noneArray[i][1]);
        }
        els[k].style.display = '';
      }
    }

    return _bs4Display;
  }

  if(typeof(window.bs4Display) === 'undefined') {
    window.bs4Display = bs4Display();
  }
})(window);

// optional, change prefix before first call
// window.bs4Display.DUMMY_PREFIX = 'bs4-display'
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>BootStrap 4 Show/Hide</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <p>
    <button onclick="bs4Display.show(document.getElementById('none'));" type="button" class="btn btn-primary">Show d-none</button>
    <button onclick="bs4Display.hide(document.getElementById('none'));" type="button" class="btn btn-secondary">Hide d-none</button>
    <button onclick="bs4Display.reset(document.getElementById('none'));" type="button" class="btn btn-info">Reset d-none</button>
  </p>
  <p>
    <button onclick="bs4Display.show(document.getElementById('block'));" type="button" class="btn btn-success">Show d-block</button>
    <button onclick="bs4Display.hide(document.getElementById('block'));" type="button" class="btn btn-danger">Hide d-block</button>
    <button onclick="bs4Display.reset(document.getElementById('block'));" type="button" class="btn btn-info">Reset d-block</button>
  </p>
  
  <div class="container">
  <div id="none" class="d-none p-2 bg-primary text-white">d-none</div>
  <div id="block" class="d-block p-2 bg-dark text-white">d-block</div>
    
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Run codeHide result
0
source

Source: https://habr.com/ru/post/1689583/

More articles:


All Articles