Use Element.classList

myAPP.js

@@ -7,10 +7,10 @@ See the README.md for more info
 */
 
 myAPP.Accordion = function ( panelSelectorsObj ) { // e.g. function ({ heading: <String>, content: <String>})
-    
+
     this.panels = []; // Master list of collapsable panels. Accessible publically e.g myAPP.accordionContainer.panels[0].select();
     this.panelSelectors = panelSelectorsObj; // an obj containing the panel selectors - { heading: <String>, content: <String>}
-    this.accordionPanels = document.querySelectorAll( this.panelSelectors['heading'] ); 
+    this.accordionPanels = document.querySelectorAll( this.panelSelectors['heading'] );
 
     for (i = 0; i < this.accordionPanels.length; i++) {
         this.makePanel( this.accordionPanels[i], i );
@@ -39,13 +39,13 @@ myAPP.AccordionPanel = function ( headingEl, panelHolder, index ) {
     this.panelHolder = panelHolder;
     this.index = index;
     this.headingEl = headingEl; // this is the clickable heading
-    this.contentEl = headingEl.nextElementSibling;//headingEl.querySelector( this.panelHolder.panelSelectors['content'] ); 
+    this.contentEl = headingEl.nextElementSibling;//headingEl.querySelector( this.panelHolder.panelSelectors['content'] );
     this.isSelected = false;
 
     this.setupAccessibility();
 
     this.headingEl.addEventListener( "click", function () {
-        
+
         if (self.isSelected){
             self.unselect(); // already open, presume user wants it closed
         }
@@ -79,32 +79,32 @@ myAPP.AccordionPanel.prototype = {
         var self = this;
         this.isSelected = true;
 
-        this.headingEl.addClass('active');
+        this.headingEl.classList.add('active');
         this.headingEl.setAttribute( 'aria-expanded', 'true' );
         this.headingEl.setAttribute( 'aria-selected', 'true' );
 
-        this.contentEl.addClass('active');
+        this.contentEl.classList.add('active');
         this.contentEl.setAttribute( 'aria-hidden', 'false' );
         setTimeout(function(){
             self.contentEl.focus();
         }, 1000); // wait for animation to finish before shifting focus (Don't need to - just looks nicer)
-        
+
     },
     unselect: function () {
         this.isSelected = false;
 
-        this.headingEl.removeClass('active');
+        this.headingEl.classList.remove('active');
         this.headingEl.setAttribute( 'aria-expanded', 'false' );
         this.headingEl.setAttribute( 'aria-selected', 'false' );
 
-        this.contentEl.removeClass('active');    
+        this.contentEl.classList.remove('active');
         this.contentEl.setAttribute( 'aria-hidden', 'true' );
     }
 };
 
 myAPP.init = function () {
 
-    // Create Accordian instance and turn all elements with class '.accordion-panel' into AccordianPanel Class intances. 
+    // Create Accordian instance and turn all elements with class '.accordion-panel' into AccordianPanel Class intances.
     this.accordionContainer = new myAPP.Accordion({
         heading:    '.accordion-panel__heading',
         content:    '.accordion-panel__content'
@@ -117,27 +117,3 @@ myAPP.init = function () {
 window.onload = function () {
     myAPP.init();
 };
-
-/* ------------------------------------------------
-
-    C o n v e n i e n c e    M e t h o d s
-
------------------------------------------------- */
-
-HTMLElement.prototype.addClass = function ( className ) {
-    // e.g. el.addClass( 'className' ); 
-    if (this.classList){
-        this.classList.add( className );
-    }else{
-        this.className += ' ' + className;
-    }
-}
-
-HTMLElement.prototype.removeClass = function (className) {
-    // e.g. el.removeClass( 'className' ); 
-    if (this.classList){
-      this.classList.remove(className);
-    }else{
-      this.className = this.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
-    }
-}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "accessible-accordian-class-pure-js-css",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Accessible Accordian Class Pure JS CSS",
   "main": "myAPP.js",
   "scripts": {
@@ -12,7 +12,7 @@
     "url": "git+https://benbowes@github.com/benbowes/Accessible-Accordian-Class-Pure-JS-CSS.git"
   },
   "author": "Ben Bowes <bb@benbowes.com>",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/benbowes/Accessible-Accordian-Class-Pure-JS-CSS/issues"
   },