toggle data and plus to minus using javascript

In this example below you will see how to do a toggle data and plus to minus using javascript with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mansi295, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mansi295 ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>toggle data and plus to minus using javascript</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<p class="disclaimer-button">
  <a href="#disclaimer" class="toggler">blah blah</a>

</p>


<div id="disclaimer" class="disclaimer-note">
  this is displayed
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mansi295/toggle-data-and-plus-to-minus-using-javascript-xrqyXN */
.disclaimer-button {
  margin: 10px 0;
  font-size: 26px;
}
.disclaimer-button a {
  text-decoration: none;
}
.disclaimer-button a:after {
  content: '+';
  margin: 5px;
  display: inline-block;
  text-align: center;
  color: white;
  background-color: red;
  border-radius: 100%;
  font-size: 16px;
  line-height: 16px;
  width: 18px;
  height: 18px;
  transition: all 0.2s ease-in-out;
}

.rotate-icon:after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}


/*Downloaded from https://www.codeseek.co/mansi295/toggle-data-and-plus-to-minus-using-javascript-xrqyXN */
'use strict';

/**
 * Vanilla JS equivalent to jQuery's onReady event. Basically it's the same as onLoad
 * but is cross-browser and cross-platform without the need of a library, and it waits
 * only until the DOM has finished rendering.
 * @param  {Function} fn [Accepts any function (name or anonymous, see below) to append
 * to the windows DOMContentLoading event]
 * @return {NONE} [None]
 * @example
 * ready(myFunction);
 * ready(function() { ... })
 */
function ready(fn) {
    try{
        if (document.readyState !== 'loading') {
            fn();
        } else if (document.addEventListener) {
            document.addEventListener('DOMContentLoaded', fn);
        } else {
            document.attachEvent('onreadystatechange', function () {
                if (document.readyState !== 'loading') fn();
            });
        }
    }catch(err){}
}

// Simple, reusable, accessible, progressively enhanced vanilla JS toggler.
// Usage:
//    The trigger should be a link,
//    with a valid anchor to the target content
//    And a classname of "toggler"
//    The target needs nothing.
//    Do not set "display:none" on the target in the CSS.
//    This takes care of it for you.
//    
ready(function() {
  var togglerClick = function(e, fn) {
    target = e.target;                    // [NODE]
    target = target.hash.substr(1) || null;  // "disclaimer"
    target = document.getElementById(target);
    fn = false;// [HTML OBJECT]

    if (typeof(target) !== 'undefined') { 
      if(target.getAttribute('hidden')){
          target.removeAttribute('hidden') 
        //document.querySelectorAll( 'a.toggler' )[0].classList.remove("rotate-icon");
        //if(fn) document.querySelectorAll( 'a.toggler' )[0].classList.remove("rotate-icon");
          if(typeof(fn) === "function") fn(true) document.querySelectorAll( 'a.toggler' )[0].classList.remove("rotate-icon"); 
        } else {
          target.setAttribute('hidden', 'hidden');      
          if(typeof(fn) === "function") fn(false)  document.querySelectorAll( 'a.toggler' )[0].classList.add("rotate-icon"); 
         // document.querySelectorAll( 'a.toggler' )[0].classList.add("rotate-icon");
        }
    }
  };

  var togglers = document.querySelectorAll( 'a.toggler' );
  for (var i = 0; i < togglers.length; i++) {
    var target = document.getElementById(togglers[i].hash.replace('#',''));

    if (typeof target !== "undefined") {
      target.setAttribute('hidden', 'hidden');
      togglers[i].addEventListener("click", function(){ togglerClick(window.event, fn)} );
    }
  }
});

// usage: 
// the styles for this should be .rotate-Icon:after {transform: rotate(45deg);} 
// as the icon should also rotate when the toggler class is clicked
// as this handles to add and remove the class to the toggler
var myHandler = function(fnState, options){
    var target = document.querySelectorAll( 'a.toggler' )[0];
   if(fnState) target.classList.remove("rotate-icon");
  else  target.classList.add("rotate-icon");
}
/**
 * Polyfill for forEach IE11
 */
if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = function (callback, argument) {
        argument = argument || window;
        for (var i = 0; i < this.length; i++) {
            callback.call(argument, this[i], i, this);
        }
    };
}

Comments