Freebie: Bootstrap 4 Toggle Cards

Add these slick toggle effects to your Bootstrap 4 cards to give your site a bit more WOW factor.

The new Bootstrap 4 Card component is a great & flexible addition to Bootstrap so we thought we’d look at expanding it some more!

The HTML

The markup builds on top of the default card markup by adding card-off & card-on elements within the card. card-off is shown by default when the card is “off” and card-on is shown when the card is “on” or “active”. We then add a data attribute data-toggle="card-toggle" to tell Javascript that this is a “toggle card”.

 

<div class="card" data-toggle="card-toggle">
  <!-- Off state (shown by default) -->
  <div class="card-off">
    "Off" / Default content
  </div>

  <!-- On state (shown when toggled) -->
  <div class="card-on">
    "On" content
  </div>
</div>

CSS

The key toggle functionality relies on the following CSS to ensure the “on” state is only visible when the card is “active”:

.card-on {
  display: none; }

.card-active .card-off {
  display: none; }

.card-active .card-on {
  display: block; }

 

There are also 4 different effects built in which alter the base CSS, the effects are:

  • fade
  • slide-up
  • slide-down
  • slide-up-down

They can be set by adding the option data-effect="EFFECT-NAME" to the data-toggle="card-toggle" element.

Add your own effects using data-effect="EFFECT-NAME" to the trigger & then .card-effect-EFFECT-NAME to your CSS, see css/tutorial.css & scss/tutorial.scss to examples.


Javascript

Lastly we need to tie everything together with some Javascript.

var $cardToggles = $('[data-toggle="card-toggle"]');

// Custom functions
// =====================================

// Trigger card toggles
var cardTogglesTrigger = function(init) {  
  $cardToggles.each(function(i) {
    var $cardToggle    = $(this);
    var $cardToggleOff = $cardToggle.find('.card-off');
    var $cardToggleOn  = $cardToggle.find('.card-on');
    var toggler        = $cardToggle.data('toggler') || null; // jQuery selector or if none assume self
    var action         = $cardToggle.data('action') || 'click'; // click or hover (hover only works for $cardToggle)
    var effect         = $cardToggle.data('effect') || null; // Toggle effect: fade, slide up/down


    
    // Init/First run
    // ---------------------------
    if (init === true) {
      if (effect !== null) {
        // If effect set wrapper to same height as on state if on state is taller
        // Use a clone to track actual size as effects use position absolute
        var cardToggleSetHeight = function() {
          var cardToggleOnHeight = $cardToggleOn.outerHeight();
          var $cardToggleClone = $cardToggleOff.clone();
          if (cardToggleOnHeight > 0 && cardToggleOnHeight > $cardToggleOff.outerHeight()) {
            $cardToggleClone = $cardToggleOn.clone();
          }
          $cardToggleClone.addClass('card-on-clone').appendTo($cardToggle);
          
          // Add effect class
          $cardToggle.addClass('card-effect-'+ effect);
        }
  
        // Use imagesLoaded if avaiable: https://github.com/desandro/imagesloaded
        if (jQuery().imagesLoaded) {
          $cardToggle.imagesLoaded(function() {
            cardToggleSetHeight();
          });
        }
        else {
          cardToggleSetHeight();
        }
      }      
      
      // What element triggers toggle
      var $toggler = $cardToggle;
      if (toggler !== null && $cardToggle.find(toggler).length > 0) {
        $toggler = $cardToggle.find(toggler);
        action  = 'click';
      }
      $toggler.addClass('card-toggler');
      
      // Trigger toggle on action (click or hover)
      if (action === 'click') {
        $toggler.on(action, function() {
          if ($cardToggle.hasClass('card-active')) {
            $cardToggle.removeClass('card-active');
          }
          else {
            $cardToggle.addClass('card-active');
          }
          return false;
        });
      }
      else if (action === 'hover') {
        $toggler.mouseover(function() {
          $cardToggle.addClass('card-active');
        }).mouseout(function() {
          $cardToggle.removeClass('card-active');
        });
      }
    }    
  });
}

// On page load
// =========================
$(document).ready(function() {
  if ($cardToggles.length > 0) {
    // Initial card toggles
    cardTogglesTrigger(true);
    
    $(window).on('resize', function() {
      cardTogglesTrigger();
    });
  }
});

To summarise what the Javascript does it basically finds the “card toggle” elements, reads their trigger, action & effect and then when the card is toggled it simply applies a .card-active class to the data-toggle="card-toggle" and let’s CSS run the effect.

As some effects absolutely position the card on/off elements we also add in a clone of the tallest element out of those 2 order to maintain the height of the data-toggle="card-toggle" element.


Options

Like most BootBites freebies we like to throw a bunch of options in the mix.

  • data-toggler="JQUERY-SELECTOR": jQuery Selector of elements within the “card” that toggle the card. ie. data-toggler=".card-toggler". If left blank the card itself will be the toggler.
  • data-action="click OR hover": Action that triggers toggle. If data-toggler="JQUERY-SELECTOR" is ommited you can use “hover” to trigger the toggle effect on card hover.
  • data-effect="EFFECT-NAME": name of effect to apply on toggle, options are fade, slide-up, slide-down & slide-up-down. ie. data-effect="fade"
    Add your own effects using data-effect="EFFECT-NAME" to the trigger & then .card-effect-EFFECT-NAME to your CSS

 

No Coments

    Leave a Reply

    Your email address will not be published. Required fields are marked *