Member Profile

Here are some tools, resources and recommendations you may find useful for your next or any future projects. Will continue to grow 😉

First Last

Change Avatar

Get started with some quick tips or find your saved favorites. 🤙

Request Code Crumbs

Want to suggest a snippet?

Got your suggestion!
Thanks, Name!
Oops! Something went wrong while submitting the form.
Logout
Copy
Buy us a coffeeBuy us a coffee

Saved Favorites

Ticker
</ head> Code
</ body> Code
<!-- CODECRUMBS TICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/ticker@0.1.5/index.min.js"></script>
<script>
window.CodeCrumbs.Ticker({
	tickerSelector: ".cc-ticker"
})
</script>
HTML/Embed Code
Learn How to Use This
Date Picker
</ head> Code
</ body> Code
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@latest/index.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
})
</script>
HTML/Embed Code
Learn How to Use This
Swap All Values on Click
</ head> Code
</ body> Code
<!-- SWAP VALUES ON CLICK --> 
<script>
function setupSwitcher({
  /* Click Trigger Class */
  swapTrigger = "switcher",

  /* Essentials */
  swapText = "swap-text",
  swapDisplay = "swap-display",
  swapClass = "swap-class",
  swapUrl = "swap-url",

  /* Toggle and Add Attributes */
  swapToggleAttribute = "swap-toggle-attribute",
  swapAddAttribute = "swap-add-attribute",
  swapAddAttributeValue = "swap-add-attribute-value",

  /* Replace Attribute Value */
  swapAttributeTarget = "swap-attribute-target",
  swapTargetValue = "swap-target-value"

} = {}) {
  const swapAll = () => {
    // SWAP TEXT
    document.querySelectorAll(`[${swapText}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapText);
      const currentValue = swapDomElement.innerText;

      swapDomElement.innerText = nextValue;
      swapDomElement.setAttribute(swapText, currentValue);
    });

    // SWAP DISPLAY
    document.querySelectorAll(`[${swapDisplay}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapDisplay);
      const currentValue = swapDomElement.style.display;

      swapDomElement.style.display = nextValue;
      swapDomElement.setAttribute(swapDisplay, currentValue);
    });

    // SWAP CLASS
    document.querySelectorAll(`[${swapClass}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapClass);
      swapDomElement.classList.toggle(nextValue);
    });

    // SWAP URL
    document.querySelectorAll(`[${swapUrl}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapUrl);
      const currentValue = swapDomElement.href;

      swapDomElement.href = nextValue;
      swapDomElement.setAttribute(swapUrl, currentValue);
    });

    // TOGGLE ATTRIBUTE
    document.querySelectorAll(`[${swapToggleAttribute}]`).forEach((swapDomElement) => {
      const toggleAttribute = swapDomElement.getAttribute(
        swapToggleAttribute
      );
      swapDomElement.toggleAttribute(toggleAttribute);
    });

    // ADD ATTRIBUTE
    document.querySelectorAll(`[${swapAddAttribute}]`).forEach((swapDomElement) => {
      const newAttribute = swapDomElement.getAttribute(swapAddAttribute);
      const newAttributeValue = swapDomElement.getAttribute(
        swapAddAttributeValue
      );

      if (swapDomElement.hasAttribute(newAttribute)) {
        swapDomElement.removeAttribute(newAttribute);
      } else {
        swapDomElement.setAttribute(newAttribute, newAttributeValue);
      }
    });

    // REPLACE ATTRIBUTE VALUE
    document.querySelectorAll(`[${swapAttributeTarget}]`).forEach((swapDomElement) => {
      const attributeTarget = swapDomElement.getAttribute(
        swapAttributeTarget
      );
      let attributeValue = swapDomElement.getAttribute(attributeTarget);
      let newValue = swapDomElement.getAttribute(swapTargetValue);

      swapDomElement.setAttribute(attributeTarget, newValue);
      swapDomElement.setAttribute(swapTargetValue, attributeValue);
    });
  };

  document.querySelectorAll(`.${swapTrigger}`).forEach((switcherDomElement) => {
    switcherDomElement.addEventListener("click", swapAll);
  });
}

setupSwitcher();
</script>
HTML/Embed Code
Learn How to Use This
Find, Style & Replace Matching Strings
</ head> Code
</ body> Code
<!-- FIND, STYLE AND REPLACE MATCHING STRINGS --> 
<script>
const targetStrings = [
  {
  	selector: 'h2',
    targetString: 'String 1',
    replacementString: 'String 1 replacement',
    appendedClassName: 'class-name-here',
  },
  {
  	selector: 'p',
    targetString: 'String 2',
    replacementString: 'String 1 replacement',
    appendedClassName: 'class-name-here',
  },
]

function wrapAndReplaceMatches(selector, newClass, wordTarget, replacement) {
  const pattern = new RegExp(`\\b(${wordTarget})\\b`, 'gi');
  const hasClassAttr = newClass ? `class=${newClass}` : ''
  const wrapAndReplace = !replacement
  ? `<span ${hasClassAttr}>$1</span>`
  : `<span ${hasClassAttr}>${replacement}</span>`;
  Array.from(document.querySelectorAll(selector)).forEach((element) => {
		element.innerHTML = element.innerHTML.replace(pattern, wrapAndReplace);
	});
}

document.addEventListener('DOMContentLoaded', () => {
  targetStrings.forEach(({
  	selector,
    targetString,
    replacementString,
    appendedClassName
  }) => {
    wrapAndReplaceMatches(selector, appendedClassName, targetString, replacementString)
  })
});
</script>
HTML/Embed Code
Learn How to Use This
Floating Form Labels
</ head> Code
<!-- FORM STYLES --> 
<style>
.input-label {
	pointer-events: none;
}

.input::placeholder {
	opacity: 0;
  transition: opacity .2s ease-out;
}

.input:focus::placeholder {
	opacity: 1;
}
</style>
</ body> Code
<!-- FLOATING FORM LABELS -->
<script defer src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/floating-form-labels@0.1.1/index.min.js"></script>
<script>
window.CodeCrumbs.FloatLabels({
  inputSelector: ".input",
  labelActiveClass: "float",
})
</script>
HTML/Embed Code
Learn How to Use This
Clip Path - Slanted Edges
</ head> Code
<!-- SNIPPET NAME HERE -->
<style>
/* clip elements to specific shapes */
/* provide 4 values for each side in the order: top, right, bottom, left to create the polygon */
/* the calc() property is used to make calculations based on viewport  */
.cp-1{
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%); /* webkit browsers */
}

.cp-2{
	clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%); /* webkit browsers */
}

.cp-3{
	clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 90%); /* webkit browsers */
}

.cp-4{
	clip-path: polygon(0 0, 100% 0, 100% 90%, 25% 80%, 50% 100%, 5% 80%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 80%, 50% 100%, 25% 80%, 0 90%); /* webkit browsers */
}

.cp-btn {
	clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
  -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%); /* webkit browsers */
}

.cp-btn:hover {
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%); /* webkit browsers */
}
</style>
</ body> Code
HTML/Embed Code
Learn How to Use This
Datepicker
</ head> Code
<!-- DATE PICKER STYLES -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<style>
:root {
	/* Color Settings */
  --accent-color: #7262e6;							/* Controls BG Color for Selected Date */
  --secondary-accent-color: #9287e2;		/* Controls Text Color for Current Date */
	--main-bg-color: #1f2023;							/* Controls BG Color of the Calendar */
  --secondary-bg-color: #27292d;				/* Controls BG for Calendar Dates */
  --heading-color: #ffffff;							/* Controls Main Heading Color */
  --font-color: #c1c9d2;								/* Controls Main Font Color */
  --accent-top-text-color: #ffffff;			/* Controls Font Color on top of Accent Color */
  --disabled-font-color: #999999;				/* Controls Disabled Font Color */
  --shadow-color: 0 5px 15px -5px rgba(0,0,0,.5);
  
  /* Size & Spacing Settings */
  --border-radius: 4px;									/* Controls Large Border Radius (Calendar Itself) */
  --border-radius-sm: 2px;							/* Controls Small Border Radius (Calendar Dates) */
  --font-size: 16px;										/* Controls Font Size */
  --table-gap: 2px;											/* High number is not recommended */
  
  /* Arrow Icons */
  --left-arrow: url('https://assets-global.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dd958382e006f4eb2033_chevron-left.svg');
  --right-arrow: url('https://assets-global.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dbca268421b03c01abf6_chevron-right.svg');   
  --arrow-bg-color: transparent;
}



/* Picker Element Itself */
.pika-single {
  color: var(--heading-color);
  background: var(--main-bg-color);
  border: none !important;
  border-bottom-color: none !important;
  border-radius: var(--border-radius);
  font-family: inherit !important;
}

/* Datepicker Shadow */
.pika-single.is-bound {
  box-shadow: var(--shadow-color) !important;
}

/* Month & Year Displayed in Middle */
.pika-label {
  color: var(--heading-color);
  background-color: transparent !important;
}

.pika-prev, .is-rtl .pika-next {
	background-image: var(--left-arrow);
}
.pika-next, .is-rtl .pika-prev {
  background-image: var(--right-arrow);
}

/* This is the table element which includes the days labels and the days in the month */
.pika-table {
	border-spacing: var(--table-gap) !important;
  border-collapse: separate;
  font-size: var(--font-size) !important;
}

/* Days of the Week Labels */
.pika-table th {
  color: var(--font-color);
  text-align: center;
}

/* Days of the Week Underline - Example = underline dotted */
abbr[title] {
  text-decoration: none !important;
  cursor: default !important;
}

/* Month Days on Calendar - Default State */
.pika-button {
  color: var(--font-color);
  background: var(--secondary-bg-color);
  border-radius: var(--border-radius-sm);
  text-align: center;
  font-size: 12px !important;
}

/* Week Label */
.pika-week {
  color: var(--font-color);
}

/* Current Day Text/Number Color */
.is-today .pika-button {
  color: var(--secondary-accent-color) !important;
}

/* The Selected Date/Day */
.is-selected .pika-button {
  color: var(--accent-top-text-color) !Important;
  background: var(--accent-color);
  box-shadow: none !important;
}

/* Styles for any Disabled Dates/Days  */
.is-disabled .pika-button {
  color: var(--disabled-font-color);
  opacity: .3;
  background: transparent !important;
}

/* Styles for Date/Day Hover (can be same styles as "selected" styles) */
.pika-button:hover {
  color: var(--accent-top-text-color) !important;
  background: var(--accent-color) !important;
  border-radius: var(--border-radius-sm) !important;
}

/* Next & Prev Arrow Buttons */
.pika-prev, .pika-next {
	display: block;
	cursor: pointer;
	position: relative;
	outline: none;
	border: 0;
	padding: 0;
	width: 20px;
	height: 30px;
	text-indent: 20px;
	white-space: nowrap;
	overflow: hidden;
	background-color: var(--arrow-bg-color) !important;
	opacity: .5;
}
</style>
</ body> Code
<!-- DATE PICKER JS --> 
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<!-- FOR 'SINGLE' DATE PICKER ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
var picker = new Pikaday({ 
	field: document.getElementById('datepicker'),
	disableWeekends: true, // Disables option to select weekend days
	firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
	minDate: new Date(), // Disables option to select days prior to current day
  //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>





<!-- FOR 'MULTIPLE' DATE PICKERS ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
$('.date-picker').each(function() {  // ".date-picker" is the class name you would set on each field that needs a date picker.
    $(this).data('pikaday', new Pikaday({ 
      field: $(this)[0],
      disableWeekends: true, // Disables option to select weekend days
      firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
      minDate: new Date(), // Disables option to select days prior to current day
      //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
    }));
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>
HTML/Embed Code
Learn How to Use This
Custom Javascript Accordion
</ head> Code
<!-- Javascript Accordion Styles -->
<style>
.js-accordion-body {
	display: none;
}
</style>
</ body> Code
<!-- Javascript Accordion -->
<script>
// Accordion Settings 
const accSettings = {
  speed: 300, // Animation speed
  oneOpen: true, // Close all other accordion items if true
  offsetAnchor: true, // Activate scroll to top for active item
  offsetFromTop: 180, // In pixels – Scroll to top at what distance
  scrollTopDelay: 400, // In Milliseconds – Delay before scroll to top 
  
  classes: {
  	accordion: 'js-accordion',
    header: 'js-accordion-header',
    item: 'js-accordion-item',
    body: 'js-accordion-body',
    icon: 'js-accordion-icon',
    active: 'active',
  }
};


const prefix = accSettings.classes

const accordion = (function(){
  const accordionElem = $(`.${prefix.accordion}`)
  const accordionHeader = accordionElem.find(`.${prefix.header}`)
  const accordionItem = $(`.${prefix.item}`)
  const accordionBody = $(`.${prefix.body}`)
  const accordionIcon = $(`.${prefix.icon}`)
  const activeClass = prefix.active
    
  return {
    // pass configurable object literal
    init: function(settings) {
      accordionHeader.on('click', function() {
        accordion.toggle($(this));
        if(accSettings.offsetAnchor) {
        	setTimeout(() => { 
        		$('html').animate({scrollTop: $(this).offset().top-accSettings.offsetFromTop}, accSettings.speed);
    			}, accSettings.scrollTopDelay);
        }
      });
      
      $.extend(accSettings, settings); 
      
      // ensure only one accordion is active if oneOpen is true
      if(settings.oneOpen && $(`.${prefix.item}.${activeClass}`).length > 1) {
        $(`.${prefix.item}.${activeClass}:not(:first)`).removeClass(activeClass).find(`.${prefix.header} > .${prefix.icon}`).removeClass(activeClass);
      }
      // reveal the active accordion bodies
      $(`.${prefix.item}.${activeClass}`).find(`> .${prefix.body}`).show();
      
    },
    
    toggle: function($this) {
      if(accSettings.oneOpen && $this[0] != $this.closest(accordionElem).find(`> .${prefix.item}.${activeClass} > .${prefix.header}`)[0]) {
        $this.closest(accordionElem).find(`> .${prefix.item}`).removeClass(activeClass).find(accordionBody).slideUp(accSettings.speed);
        $this.closest(accordionElem).find(`> .${prefix.item}`).find(`> .${prefix.header} > .${prefix.icon}`).removeClass(activeClass);
      }
      
      // show/hide the clicked accordion item
      $this.closest(accordionItem).toggleClass(`${activeClass}`).find(`> .${prefix.header} > .${prefix.icon}`).toggleClass(activeClass);
      $this.next().stop().slideToggle(accSettings.speed);
    }
  }
})();

$(document).ready(function(){
  accordion.init(accSettings);
});
</script>
HTML/Embed Code
Learn How to Use This
Disable User Select
</ head> Code
<!-- DISABLES TEXT SELECT -->
<style>
/* disable user selection of an element */
.noselect {
  -webkit-user-select: none; /* webkit browsers */
  -khtml-user-select: none; /* Konqueror browser */
  -moz-user-select: none; /* firefox browser */
  -ms-user-select: none; /* internet explorer & edge */
  user-select: none;
}
</style>
</ body> Code
HTML/Embed Code
Learn How to Use This
Custom Quantity Buttons
</ head> Code
<!-- CUSTOM QUANTITY BUTTONS -->
<style>
/* remove form styles & set margin at 0 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>
</ body> Code
With Code Comments:
<!-- CUSTOM QUANTITY BUTTONS --> 
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/quantity-buttons@v0.1.4/index.min.js"></script>  

<script>
  window.CodeCrumbs.QuantityButtons({
    quantityGroupClass: 'q-group',
    quantityIncrementButtonClass: 'q-inc',
    quantityDecrementButtonClass: 'q-dec',
    quantityNumberFieldClass: 'q-num',
    disableDecrementAtOne: true,
  })
</script>
HTML/Embed Code
Learn How to Use This
Open Specific Tabs from other Pages
</ head> Code
</ body> Code
<!-- OPEN SPECIFIC TABS -->
<script>
// get the webflow array or define a new one if none exists
var Webflow = Webflow || [];
// push the click tabs handler function into the webflow array
Webflow.push(function () {
  // get the respective tab name using the getParam function and store it in a tabName variable
  var tabName = getParam('tab');
  // terminate the function if no tab name was found
  if (!tabName) return;

  // click on the tab
  $('.' + tabName).triggerHandler('click');

  // define the getParam function
  function getParam(name) {
    // replace any '[' in the tab name with '\['
    // & also replace any ']' in the tab name with '\]'
    // this escapes the symbols '[' & ']' so they can be used in regex
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    // define a regex to search for the tab name
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      // search for the tab name in the query string part of the page's url
      results = regex.exec(location.search);
    // return the tab name OR "" if no tab name found
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
});
</script>
HTML/Embed Code
// this is the url format for each button link that when clicked navigates to the tabs page
/page-name?tab=tab-name-here
Learn How to Use This
Cookie Notice
</ head> Code
<!-- Add the COOKIE CONSENT css -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
</ body> Code
<!-- Add the COOKIE CONSENT dependency script file --> 
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>

<script>
// initialize cookieconsent & define options
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#ebe5ca",       // Background color for popup card
      "text": "#000000"              // Main text color for message
    },
    "button": {
      "background": "#a09e91",       // Background color for button (use "transparent" if you use the "wire" theme below.     "
      "text": "#fcf8f2",             // Button text color
      //border: "#a09e91"            // Remove the first "//" if you plan on using the wire theme below
    }
  },
  "theme": "block",               // Theme options: "edgeless", "block", "classic", "wire"  
  "position": "bottom-right",        // Positions options: "bottom-right", "bottom-left", "top", "bottom" 
  "static": false,                  // Set to "true" only if you choose "top" for the position which will push your content down instead of covering it.
  "content": {
    // Main message text on the cookie popup
    "message": "This website uses cookies to ensure you get the best experience on our website.",
    
    // Button text to accept
    "dismiss": "Got it!",
    
    // Button Link to your cookie policy or remove this line if you want it to go to: https://www.cookiesandyou.com/ (info site about cookies for your visitors)
    "href": "https://yoursite.com/cookie-policy"        
  }
});
</script>
HTML/Embed Code
Learn How to Use This
Math Captcha for Forms
</ head> Code
</ body> Code
<!-- MATH CAPTCHA --> 
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/math-captcha@0.1.7/index.min.js"></script>

<script>
  window.CodeCrumbs.MathCaptcha({
    formClassSelector: ".contact-form",
    captchaLabelSelector: ".math-label",
    captchaInputSelector: ".math-field",
    validTargetAttribute: "valid-captcha-class",
    invalidTargetAttribute: "invalid-captcha-class",
    removeClassesOnEmptyInput: true
  })
</script>
HTML/Embed Code
Learn How to Use This
Apple Frost Blur
</ head> Code
<!-- APPLE FROST BLUR --> 
<style>
.frost-blur {
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}
</style>
</ body> Code
HTML/Embed Code
Learn How to Use This
Disable Form Submit with the "Enter" Key
</ head> Code
</ body> Code
<!-- DISABLE SUBMIT WITH ENTER KEY --> 
<script>
$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});
</script>
HTML/Embed Code
Learn How to Use This
Custom Selection & Highlight Color
</ head> Code
<!-- CUSTOM SELECTION / HIGHLIGHT COLOR --> 
<style>
	:-moz-selection { color: #000; background: #90fcdc;}
	::selection { color: #000; background: #90fcdc;}
</style>
</ body> Code
HTML/Embed Code
Learn How to Use This
Reveal Submit Button When Email is Validated
</ head> Code
</ body> Code
<!-- REVEAL SUBMIT BUTTON WHEN EMAIL IS VALIDATED --> 
<script>
  $(function(){

    // Only show submit button on proper email
    ;( function( $, window, document, undefined ) {
        'use strict';
        var form        = '.email-form',
            className   = 'email-active',
            submit      = 'input[type="submit"]',
            email       = 'input[type="email"]';
        $( form ).each( function(){
            var $form   = $( this ),
                $email  = $form.find( email ),
                $submit  = $form.find( submit ),
                val     = '';
            $email.on( 'keyup.addClassWhenEmail', function(){
                val = $email.val();
                $submit.toggleClass( className, val != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( val ) );    
            });
        });
    })( jQuery, window, document );
  })
</script>
HTML/Embed Code
Learn How to Use This
Dynamic Weekday
</ head> Code
</ body> Code
<!-- DYNAMIC WEEKDAY --> 
<script>
// for each .weekday element
document.querySelectorAll('.weekday').forEach(weekday => {
  // get today's day
  const today = new Intl.DateTimeFormat('en', {weekday:'long'}).format(new Date());
  // set it as the current text
  weekday.textContent = today;
});
</script>
HTML/Embed Code
Learn How to Use This
Dynamic Copyright Year
</ head> Code
</ body> Code
For using a class selector to target multiple elements on the same page:
<!-- Dynamic Copyright Year -->
<script>
// For using a class to select multiple elements
const yearElems = document.querySelectorAll(".year")

yearElems.forEach(function(yearElem) {
  yearElem.innerText = new Date().getFullYear()
})
</script>
For using an ID selector to target a single element on a page:
<!-- Dynamic Copyright Year -->
<script>
// For targeting a single element using ID
 function copyrightYear() {
   const yearElem = document.getElementById("year")
   yearElem.innerText = new Date().getFullYear()
 }
copyrightYear()
</script>
HTML/Embed Code
Learn How to Use This
Browser Back Button
</ head> Code
</ body> Code
<!-- Browser Back Button -->
<script>
$( document ).ready(function() {
	$( ".back-button__class-name" ).click(function() { // Create any class name between the " ". Then add this class name to any back button on that page.  
		window.history.back();
	});
});
</script>
HTML/Embed Code
Learn How to Use This
Custom Select Field
</ head> Code
<!-- Custom Select Field Styles --> 
<style>
  /************ ADD YOUR VALUES BELOW ************/
  :root {
    /* ----------- Colors ----------- */
		--list-bg-color: white;
    --list-text-color: inherit; /* Use "inherit" to take on parent text color */
    --select-field-arrow-color: black; /* This is the select field arrow color */
    --border-color-active: black; /* Active State */
    --border-color-hover: #dcdcdd; /* Select Field could be the same as your form field border color */
    --list-item-bg-color: #ededed; /* Select Field Hover/Focus State */

    /* ----------- Spacing ----------- */
    --select-field-padding-left: 12px; /* Match the padding values for your form fields */
    --select-field-padding-right: 12px; /* Match the padding values for your form fields */
    --list-padding-top-bottom: 10px; /* This is the top and bottom padding for the dropdown list */
    --list-max-height: 150px; /* You can set this to "Auto" as well */
    --list-item-padding-left: 18px; 
    --list-item-padding-right: 18px;
    --list-item-min-height: 40px; /* This is the height of each list item in the dropdown */
    --list-item-line-height: 40px; /* This is the height of each list item in the dropdown */

             /* ^^^  Make sure both "line-height" and "min-height" are the same! ^^^  */
  }
  /************ END OF CUSTOM VALUES ************/



  .nice-select {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    clear: both;
    padding-left: var(--select-field-padding-left);
    padding-right: var(--select-field-padding-right);
    position: relative;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    white-space: nowrap; 
  }


  .nice-select:hover {
    border-color: var(--border-color-hover); 
  }


  .nice-select:active, .nice-select.open, .nice-select:focus {
    border-color: var(--border-color-active);
  }


  .nice-select:after {
    border-bottom: 2px solid var(--select-field-arrow-color);
    border-right: 2px solid var(--select-field-arrow-color);
    content: '';
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 5px; 
  }


  .nice-select.open:after {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg); 
  }


  .nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0); 
  }


  .nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none; 
  }


  .nice-select.disabled:after {
    border-color: #cccccc; 
  }


  .nice-select.wide {
    width: 100%; 
  }


  .nice-select.wide .list {
    left: 0 !important;
    right: 0 !important; 
  }


  .nice-select.right {
    float: right; 
  }


  .nice-select.right .list {
    left: auto;
    right: 0; 
  }


  .nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px; 
  }


  .nice-select.small:after {
    height: 4px;
    width: 4px; 
  }


  .nice-select.small .option {
    line-height: 34px;
    min-height: 34px; 
  }


  .nice-select .list {
    background-color: var(--list-bg-color);
    color: var(--list-text-color);
    border-radius: 5px;
    box-shadow: 0 7px 20px 0px rgba(68, 68, 68, 0.11);
    border-color: 3px solid #ededed;
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: var(--list-padding-top-bottom) 0px;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: var(--list-max-height);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9; 
  }


  .nice-select .list:hover .option:not(:hover) {
    background-color: transparent !important; 
  }


  .nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: var(--list-item-line-height);
    list-style: none;
    min-height: var(--list-item-min-height);
    outline: none;
    padding-left: var(--list-item-padding-left);
    padding-right: var(--list-item-padding-right);
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }

  .nice-select .option:first-child {
    display: none;
  }

  span.current {
    color: var(--list-text-color);
  }

  .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
    background-color: var(--list-item-bg-color);
  }

  .nice-select .option.selected {
    font-weight: bold; 
  }

  .nice-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default; 
  }

  .no-csspointerevents .nice-select .list {
  display: none; 
  }

  .no-csspointerevents .nice-select.open .list {
  display: block; 
  }
</style>
</ body> Code
<!-- CUSTOM SELECT FIELD --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>

<script>
	$(document).ready(function() {
  	$('select').niceSelect();
	});
</script>
HTML/Embed Code
Learn How to Use This
Custom Placeholder Animation
</ head> Code
<!-- Input Field Placeholder Animation --> 
<style>
  ::placeholder {
  	transition: all 350ms ease;
  }
  
  .your-input-class:focus::placeholder {
  	transform: translate(20px, 0);
    opacity: 0.0;
  }
  
  .your-textarea-class:focus::placeholder {
  	transform: translate(20px, 0);
    opacity: 0.0;
  }
</style>
</ body> Code
HTML/Embed Code
Learn How to Use This
HTML Tables
</ head> Code
</ body> Code
HTML/Embed Code
<!-- HTML TABLE --> 
<style>
/* ----------------------------- TABLE STYLES ----------------------------- */
:root {
  /* TABLE COLORS */
  --table-header-font-color: #ffffff;
  --table-header-bg-color: teal;
  --table-header-border-color: #ffffff;
  
  --table-cell-font-color: #777777;
  --table-cell-border-color: #d2d2d2;
  
  --table-bg-color: #ffffff;
  --table-border-color: #ffffff; /* Most Likely won't be seen */
  
  /* TABLE DIMENSIONS */
  --table-header-padding-top-bottom: 12px; /* headers top & bottom padding */
  --table-header-padding-left-right: 10px; /* headers left & right padding */
  --table-heading-font-size: 18px;
  
  --table-cell-padding-top-bottom: 10px;  /* Cells top & bottom padding */
  --table-cell-padding-left-right: 10px;  /* Cells left & right padding */
  --table-cell-font-size: 14px;
  --table-cell-min-width: 200px;
  
  --table-margin-bottom: 48px;
}
/* ----------------------------- END OF TABLE STYLES ----------------------------- */



/* DON'T NEED TO WORRY ABOUT THESE BELOW!!! */
.table-wrap {
	overflow-x: scroll;
  width: 100%;
  margin-bottom: var(--table-margin-bottom);
}

table, th, td {
  border-collapse: collapse;
}

table {
	width: 100%;
  border: 1px solid var(--table-border-color);
  background-color: var(--table-bg-color);
}

th:last-child {
  border-left: 1px solid var(--table-header-bg-color);
  border-top: 1px solid var(--table-header-bg-color);
  border-right: 1px solid var(--table-header-bg-color);
  border-bottom: 1px solid var(--table-header-bg-color);
}

th {
	text-align: left;
  color: var(--table-header-font-color);
  background-color: var(--table-header-bg-color);
  padding: var(--table-header-padding-top-bottom) var(--table-header-padding-left-right);
  font-size: 16px;
  border-left: 1px solid var(--table-header-bg-color);
  border-top: 1px solid var(--table-header-bg-color);
  border-right: 1px solid var(--table-header-border-color);
  border-bottom: 1px solid var(--table-header-bg-color);
  font-size: var(--table-heading-font-size);
}

td {
  color: var(--table-cell-font-color);
  border: 1px solid var(--table-cell-border-color);
	padding: var(--table-cell-padding-top-bottom) var(--table-cell-padding-left-right);
  font-size: var(--table-cell-font-size);
}

th, td {
	min-width: var(--table-cell-min-width);
}
</style>



<!-- ****TABLE CONTENT**** -->
<div class="table-wrap">
  <table>
    <!-- heading Columns -->
    <tr>
      <th>Shoe Type</th>
      <th>Color</th>
      <th>Size</th>
      <th>Details</th>
    </tr>

    <!-- Row 1 -->
    <tr>
      <td>Running</td>
      <td>White/Black</td>
      <td>10.5, 11, 12</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>

    <!-- Row 2 -->
    <tr>
      <td>Skateboarding</td>
      <td>Black</td>
      <td>6.5, 7, 8.5, 9, 9.5, 10.5, 12</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>

    <!-- Row 3 -->
    <tr>
      <td>Hiking</td>
      <td>Tan</td>
      <td>7, 8.5, 9, 10.5, 11, 12</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>
  </table>
</div>
Learn How to Use This
Coupon Copy-to-Clipboard
</ head> Code
</ body> Code
<!-- COUPON COPY TO CLIPBOARD --> 
<script>
// change SAVE20NOW to whatever coupon or text you want to be copied
$('.coupon-field').val('SAVE20NOW')
                  .prop('readOnly', true)
                  .css( 'cursor', 'text' );

// on .copy-btn click
$('.copy-btn').click(function(){
  // copy the .coupon-field's value
  copyToClipboard($('.coupon-field').val());
  
  // save the .copy-btn's original text
  const origText = $(this).text();
  // save the .copy-btn's original font color
  const origColor = $(this).css('color');
  
  // change the .copy-btn's text
  $(this).text('Copied! 🤙');
  // change the .copy-btn's font color
  $(this).css('color', '#1fbd41');
  
  setTimeout(()=>{ // after a 2 sec setTimeout
    $(this).text(origText); // reset text back to original
    $(this).css('color', origColor); // reset font color back to original
  }, 2000);
});

// define copyToClipboard function
function copyToClipboard(str){
  // Create new element
  const el = document.createElement('textarea');
  // Set value (string to be copied)
  el.value = str;
  // Set non-editable to avoid focus and move outside of view
  el.setAttribute('readonly', '');
  el.style = {position: 'absolute', left: '-9999px'};
  document.body.appendChild(el);
  // Select text inside element
  el.select();
  // Copy text to clipboard
  document.execCommand('copy');
  // Remove temporary element
  document.body.removeChild(el);
}
</script>
HTML/Embed Code
Learn How to Use This
Simple JQuery Accordion
</ head> Code
<!-- Closes Simple JQuery Accordion Bodies on Published Site --> 
<style>
/* Hide Accordion Body */
.acc-body {
	display: none;
}
</style>
</ body> Code
<!-- Simple JQuery Accordion --> 
<script>
(function ($) {
	'use strict'; 
  	// Targeting the head/button of the accordion item to run a function when it's clicked
		$('.acc-head').on("click", function () {
    	// Looking for the next sibling within this accordion item, which is the body (for content) of the accordion to show and slide open  
			$(this).next().slideToggle(300); // 300 is the milliseconds on open
      // Finds any body of any accordion that is NOT the one currently being clicked on to hide and slide closed
			$('.acc-body').not($(this).next()).slideUp('fast');
		});
}(jQuery));
</script>
HTML/Embed Code
Learn How to Use This
Ignore Pointer (Cursor) Events
</ head> Code
<!-- Ignore Cursor Events --> 
<style>
/* disable any cursor events e.g. click & hover */
.your-class-name {
	pointer-events: none;
}
</style>
</ body> Code
HTML/Embed Code
Learn How to Use This
Remove iOS Form Styles
</ head> Code
<!--Removes iOS form styling--> 
<style>
/* Set css appearance to none & border radius to 0 */
input, textarea {
  -webkit-appearance: none; /* webkit browsers */
  -moz-appearance: none; /* firefox browser */
  appearance: none;
  border-radius: 0;  
}
</style>
</ body> Code
HTML/Embed Code
Learn How to Use This
Reset Webflow Form
</ head> Code
</ body> Code
<!-- RESET WEBFLOW FORM AFTER SUBMIT --> 
<script>
// when the DOM is ready
$(function() {
  /*** START SCRIPT CONFIG ***/

  // Replace with value for your form. ie. "#your-form-id" or ".your-form-class"
  var FORM_SELECTOR = ".your-class";

  // Do you want to hide the success message after the form is submitted?
  var HIDE_SUCCESS_MESSAGE = false;
  
  // Do you want the success message to show above the form?
  var SUCCESS_MESSAGE_ABOVE_FORM = true;

  /*** END SCRIPT CONFIG ***/

  // define the resetCustomElement function
  var resetCustomElement = function(customElement) {
    // get the input element
    var inputElement = customElement.nextSibling;
    // if it's checked
    if (inputElement.checked) {
      // add the class "w--redirected-checked"
      customElement.classList.add("w--redirected-checked");
    } else {  // if not checked
      // remove the class "w--redirected-checked"
      customElement.classList.remove("w--redirected-checked");
    }
  };

  // define the resetForm function
  var resetForm = function(form, successDiv) {
    // Reset the inputs in the form
    form.reset();

    // Reset custom checkboxes
    document.querySelectorAll(".w-checkbox-input--inputType-custom").forEach(resetCustomElement);

    // Reset custom radio buttons
    document.querySelectorAll(".w-form-formradioinput--inputType-custom").forEach(resetCustomElement);

    // Show the form
    form.style.display = "block";

    // Hide Success Message
    if (HIDE_SUCCESS_MESSAGE) {
      successDiv.style.display = "none";
    }
  };

  // get the form
  var form = document.querySelector(FORM_SELECTOR);
  // get the successdiv
  var successDiv = form.nextSibling;
  
  // If we are not hiding the success message AND we want the message above the form
  if (!HIDE_SUCCESS_MESSAGE && SUCCESS_MESSAGE_ABOVE_FORM) {
    // Move the form last so that the success message appears before it
    form.parentElement.appendChild(form);
  }

  // Create an observer to run our resetForm function when Webflow hides our form after submission
  var observer = new MutationObserver(function(mutations) {
    // if the form's display is set to none
    if (form.style.display === "none") {
      // call the resetForm function
      resetForm(form, successDiv);
    }
  });

  // Listen for when the style attribute of our form changes
  observer.observe(form, { attributes: true, attributeFilter: ["style"] });
});
</script>
HTML/Embed Code
Learn How to Use This

Aw, looks like you haven't saved any to your favorites yet.

Start Searching

Getting Started

Why CodeCrumbs?

We made CodeCrumbs to offer a solution to Webflow designers/devs who often rely on small snippets of code for that extra functionality to benefit personal or client projects.

How to use CodeCrumbs?

You can use CodeCrumbs as a tool. A repository of your favorite and most used code snippets whenever you are working in Webflow. You'll have access to quickly copy and paste them where ever they are needed.

  1. Simply start by searching any desired code solution here.
  2. Click the "Learn How to Use" button for detailed instructions on how to apply them.
  3. Click the ♥️button to save your favorite crumbs for quicker access to them.

Account Details

You can view details about your account such as membership type etc. If you have any questions about your membership please contact us via Slack.

View Account Details
Thank you! You have been added to our contributor list!
Oops! Something went wrong while submitting the form.
Ticker
</ head> Code
</ body> Code
<!-- CODECRUMBS TICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/ticker@0.1.5/index.min.js"></script>
<script>
window.CodeCrumbs.Ticker({
	tickerSelector: ".cc-ticker"
})
</script>
Learn How to Use This
Date Picker
</ head> Code
</ body> Code
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@latest/index.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
})
</script>
Learn How to Use This
Swap All Values on Click
</ head> Code
</ body> Code
<!-- SWAP VALUES ON CLICK --> 
<script>
function setupSwitcher({
  /* Click Trigger Class */
  swapTrigger = "switcher",

  /* Essentials */
  swapText = "swap-text",
  swapDisplay = "swap-display",
  swapClass = "swap-class",
  swapUrl = "swap-url",

  /* Toggle and Add Attributes */
  swapToggleAttribute = "swap-toggle-attribute",
  swapAddAttribute = "swap-add-attribute",
  swapAddAttributeValue = "swap-add-attribute-value",

  /* Replace Attribute Value */
  swapAttributeTarget = "swap-attribute-target",
  swapTargetValue = "swap-target-value"

} = {}) {
  const swapAll = () => {
    // SWAP TEXT
    document.querySelectorAll(`[${swapText}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapText);
      const currentValue = swapDomElement.innerText;

      swapDomElement.innerText = nextValue;
      swapDomElement.setAttribute(swapText, currentValue);
    });

    // SWAP DISPLAY
    document.querySelectorAll(`[${swapDisplay}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapDisplay);
      const currentValue = swapDomElement.style.display;

      swapDomElement.style.display = nextValue;
      swapDomElement.setAttribute(swapDisplay, currentValue);
    });

    // SWAP CLASS
    document.querySelectorAll(`[${swapClass}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapClass);
      swapDomElement.classList.toggle(nextValue);
    });

    // SWAP URL
    document.querySelectorAll(`[${swapUrl}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapUrl);
      const currentValue = swapDomElement.href;

      swapDomElement.href = nextValue;
      swapDomElement.setAttribute(swapUrl, currentValue);
    });

    // TOGGLE ATTRIBUTE
    document.querySelectorAll(`[${swapToggleAttribute}]`).forEach((swapDomElement) => {
      const toggleAttribute = swapDomElement.getAttribute(
        swapToggleAttribute
      );
      swapDomElement.toggleAttribute(toggleAttribute);
    });

    // ADD ATTRIBUTE
    document.querySelectorAll(`[${swapAddAttribute}]`).forEach((swapDomElement) => {
      const newAttribute = swapDomElement.getAttribute(swapAddAttribute);
      const newAttributeValue = swapDomElement.getAttribute(
        swapAddAttributeValue
      );

      if (swapDomElement.hasAttribute(newAttribute)) {
        swapDomElement.removeAttribute(newAttribute);
      } else {
        swapDomElement.setAttribute(newAttribute, newAttributeValue);
      }
    });

    // REPLACE ATTRIBUTE VALUE
    document.querySelectorAll(`[${swapAttributeTarget}]`).forEach((swapDomElement) => {
      const attributeTarget = swapDomElement.getAttribute(
        swapAttributeTarget
      );
      let attributeValue = swapDomElement.getAttribute(attributeTarget);
      let newValue = swapDomElement.getAttribute(swapTargetValue);

      swapDomElement.setAttribute(attributeTarget, newValue);
      swapDomElement.setAttribute(swapTargetValue, attributeValue);
    });
  };

  document.querySelectorAll(`.${swapTrigger}`).forEach((switcherDomElement) => {
    switcherDomElement.addEventListener("click", swapAll);
  });
}

setupSwitcher();
</script>
Learn How to Use This
Find, Style & Replace Matching Strings
</ head> Code
</ body> Code
<!-- FIND, STYLE AND REPLACE MATCHING STRINGS --> 
<script>
const targetStrings = [
  {
  	selector: 'h2',
    targetString: 'String 1',
    replacementString: 'String 1 replacement',
    appendedClassName: 'class-name-here',
  },
  {
  	selector: 'p',
    targetString: 'String 2',
    replacementString: 'String 1 replacement',
    appendedClassName: 'class-name-here',
  },
]

function wrapAndReplaceMatches(selector, newClass, wordTarget, replacement) {
  const pattern = new RegExp(`\\b(${wordTarget})\\b`, 'gi');
  const hasClassAttr = newClass ? `class=${newClass}` : ''
  const wrapAndReplace = !replacement
  ? `<span ${hasClassAttr}>$1</span>`
  : `<span ${hasClassAttr}>${replacement}</span>`;
  Array.from(document.querySelectorAll(selector)).forEach((element) => {
		element.innerHTML = element.innerHTML.replace(pattern, wrapAndReplace);
	});
}

document.addEventListener('DOMContentLoaded', () => {
  targetStrings.forEach(({
  	selector,
    targetString,
    replacementString,
    appendedClassName
  }) => {
    wrapAndReplaceMatches(selector, appendedClassName, targetString, replacementString)
  })
});
</script>
Learn How to Use This
Floating Form Labels
</ head> Code
<!-- FORM STYLES --> 
<style>
.input-label {
	pointer-events: none;
}

.input::placeholder {
	opacity: 0;
  transition: opacity .2s ease-out;
}

.input:focus::placeholder {
	opacity: 1;
}
</style>
</ body> Code
<!-- FLOATING FORM LABELS -->
<script defer src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/floating-form-labels@0.1.1/index.min.js"></script>
<script>
window.CodeCrumbs.FloatLabels({
  inputSelector: ".input",
  labelActiveClass: "float",
})
</script>
Learn How to Use This
Clip Path - Slanted Edges
</ head> Code
<!-- SNIPPET NAME HERE -->
<style>
/* clip elements to specific shapes */
/* provide 4 values for each side in the order: top, right, bottom, left to create the polygon */
/* the calc() property is used to make calculations based on viewport  */
.cp-1{
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%); /* webkit browsers */
}

.cp-2{
	clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%); /* webkit browsers */
}

.cp-3{
	clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 90%); /* webkit browsers */
}

.cp-4{
	clip-path: polygon(0 0, 100% 0, 100% 90%, 25% 80%, 50% 100%, 5% 80%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 80%, 50% 100%, 25% 80%, 0 90%); /* webkit browsers */
}

.cp-btn {
	clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
  -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%); /* webkit browsers */
}

.cp-btn:hover {
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%); /* webkit browsers */
}
</style>
</ body> Code
Learn How to Use This
Datepicker
</ head> Code
<!-- DATE PICKER STYLES -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<style>
:root {
	/* Color Settings */
  --accent-color: #7262e6;							/* Controls BG Color for Selected Date */
  --secondary-accent-color: #9287e2;		/* Controls Text Color for Current Date */
	--main-bg-color: #1f2023;							/* Controls BG Color of the Calendar */
  --secondary-bg-color: #27292d;				/* Controls BG for Calendar Dates */
  --heading-color: #ffffff;							/* Controls Main Heading Color */
  --font-color: #c1c9d2;								/* Controls Main Font Color */
  --accent-top-text-color: #ffffff;			/* Controls Font Color on top of Accent Color */
  --disabled-font-color: #999999;				/* Controls Disabled Font Color */
  --shadow-color: 0 5px 15px -5px rgba(0,0,0,.5);
  
  /* Size & Spacing Settings */
  --border-radius: 4px;									/* Controls Large Border Radius (Calendar Itself) */
  --border-radius-sm: 2px;							/* Controls Small Border Radius (Calendar Dates) */
  --font-size: 16px;										/* Controls Font Size */
  --table-gap: 2px;											/* High number is not recommended */
  
  /* Arrow Icons */
  --left-arrow: url('https://assets-global.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dd958382e006f4eb2033_chevron-left.svg');
  --right-arrow: url('https://assets-global.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dbca268421b03c01abf6_chevron-right.svg');   
  --arrow-bg-color: transparent;
}



/* Picker Element Itself */
.pika-single {
  color: var(--heading-color);
  background: var(--main-bg-color);
  border: none !important;
  border-bottom-color: none !important;
  border-radius: var(--border-radius);
  font-family: inherit !important;
}

/* Datepicker Shadow */
.pika-single.is-bound {
  box-shadow: var(--shadow-color) !important;
}

/* Month & Year Displayed in Middle */
.pika-label {
  color: var(--heading-color);
  background-color: transparent !important;
}

.pika-prev, .is-rtl .pika-next {
	background-image: var(--left-arrow);
}
.pika-next, .is-rtl .pika-prev {
  background-image: var(--right-arrow);
}

/* This is the table element which includes the days labels and the days in the month */
.pika-table {
	border-spacing: var(--table-gap) !important;
  border-collapse: separate;
  font-size: var(--font-size) !important;
}

/* Days of the Week Labels */
.pika-table th {
  color: var(--font-color);
  text-align: center;
}

/* Days of the Week Underline - Example = underline dotted */
abbr[title] {
  text-decoration: none !important;
  cursor: default !important;
}

/* Month Days on Calendar - Default State */
.pika-button {
  color: var(--font-color);
  background: var(--secondary-bg-color);
  border-radius: var(--border-radius-sm);
  text-align: center;
  font-size: 12px !important;
}

/* Week Label */
.pika-week {
  color: var(--font-color);
}

/* Current Day Text/Number Color */
.is-today .pika-button {
  color: var(--secondary-accent-color) !important;
}

/* The Selected Date/Day */
.is-selected .pika-button {
  color: var(--accent-top-text-color) !Important;
  background: var(--accent-color);
  box-shadow: none !important;
}

/* Styles for any Disabled Dates/Days  */
.is-disabled .pika-button {
  color: var(--disabled-font-color);
  opacity: .3;
  background: transparent !important;
}

/* Styles for Date/Day Hover (can be same styles as "selected" styles) */
.pika-button:hover {
  color: var(--accent-top-text-color) !important;
  background: var(--accent-color) !important;
  border-radius: var(--border-radius-sm) !important;
}

/* Next & Prev Arrow Buttons */
.pika-prev, .pika-next {
	display: block;
	cursor: pointer;
	position: relative;
	outline: none;
	border: 0;
	padding: 0;
	width: 20px;
	height: 30px;
	text-indent: 20px;
	white-space: nowrap;
	overflow: hidden;
	background-color: var(--arrow-bg-color) !important;
	opacity: .5;
}
</style>
</ body> Code
<!-- DATE PICKER JS --> 
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<!-- FOR 'SINGLE' DATE PICKER ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
var picker = new Pikaday({ 
	field: document.getElementById('datepicker'),
	disableWeekends: true, // Disables option to select weekend days
	firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
	minDate: new Date(), // Disables option to select days prior to current day
  //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>





<!-- FOR 'MULTIPLE' DATE PICKERS ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
$('.date-picker').each(function() {  // ".date-picker" is the class name you would set on each field that needs a date picker.
    $(this).data('pikaday', new Pikaday({ 
      field: $(this)[0],
      disableWeekends: true, // Disables option to select weekend days
      firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
      minDate: new Date(), // Disables option to select days prior to current day
      //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
    }));
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>
Learn How to Use This
Custom Javascript Accordion
</ head> Code
<!-- Javascript Accordion Styles -->
<style>
.js-accordion-body {
	display: none;
}
</style>
</ body> Code
<!-- Javascript Accordion -->
<script>
// Accordion Settings 
const accSettings = {
  speed: 300, // Animation speed
  oneOpen: true, // Close all other accordion items if true
  offsetAnchor: true, // Activate scroll to top for active item
  offsetFromTop: 180, // In pixels – Scroll to top at what distance
  scrollTopDelay: 400, // In Milliseconds – Delay before scroll to top 
  
  classes: {
  	accordion: 'js-accordion',
    header: 'js-accordion-header',
    item: 'js-accordion-item',
    body: 'js-accordion-body',
    icon: 'js-accordion-icon',
    active: 'active',
  }
};


const prefix = accSettings.classes

const accordion = (function(){
  const accordionElem = $(`.${prefix.accordion}`)
  const accordionHeader = accordionElem.find(`.${prefix.header}`)
  const accordionItem = $(`.${prefix.item}`)
  const accordionBody = $(`.${prefix.body}`)
  const accordionIcon = $(`.${prefix.icon}`)
  const activeClass = prefix.active
    
  return {
    // pass configurable object literal
    init: function(settings) {
      accordionHeader.on('click', function() {
        accordion.toggle($(this));
        if(accSettings.offsetAnchor) {
        	setTimeout(() => { 
        		$('html').animate({scrollTop: $(this).offset().top-accSettings.offsetFromTop}, accSettings.speed);
    			}, accSettings.scrollTopDelay);
        }
      });
      
      $.extend(accSettings, settings); 
      
      // ensure only one accordion is active if oneOpen is true
      if(settings.oneOpen && $(`.${prefix.item}.${activeClass}`).length > 1) {
        $(`.${prefix.item}.${activeClass}:not(:first)`).removeClass(activeClass).find(`.${prefix.header} > .${prefix.icon}`).removeClass(activeClass);
      }
      // reveal the active accordion bodies
      $(`.${prefix.item}.${activeClass}`).find(`> .${prefix.body}`).show();
      
    },
    
    toggle: function($this) {
      if(accSettings.oneOpen && $this[0] != $this.closest(accordionElem).find(`> .${prefix.item}.${activeClass} > .${prefix.header}`)[0]) {
        $this.closest(accordionElem).find(`> .${prefix.item}`).removeClass(activeClass).find(accordionBody).slideUp(accSettings.speed);
        $this.closest(accordionElem).find(`> .${prefix.item}`).find(`> .${prefix.header} > .${prefix.icon}`).removeClass(activeClass);
      }
      
      // show/hide the clicked accordion item
      $this.closest(accordionItem).toggleClass(`${activeClass}`).find(`> .${prefix.header} > .${prefix.icon}`).toggleClass(activeClass);
      $this.next().stop().slideToggle(accSettings.speed);
    }
  }
})();

$(document).ready(function(){
  accordion.init(accSettings);
});
</script>
Learn How to Use This
Disable User Select
</ head> Code
<!-- DISABLES TEXT SELECT -->
<style>
/* disable user selection of an element */
.noselect {
  -webkit-user-select: none; /* webkit browsers */
  -khtml-user-select: none; /* Konqueror browser */
  -moz-user-select: none; /* firefox browser */
  -ms-user-select: none; /* internet explorer & edge */
  user-select: none;
}
</style>
</ body> Code
Learn How to Use This
Custom Quantity Buttons
</ head> Code
<!-- CUSTOM QUANTITY BUTTONS -->
<style>
/* remove form styles & set margin at 0 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>
</ body> Code
With Code Comments:
<!-- CUSTOM QUANTITY BUTTONS --> 
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/quantity-buttons@v0.1.4/index.min.js"></script>  

<script>
  window.CodeCrumbs.QuantityButtons({
    quantityGroupClass: 'q-group',
    quantityIncrementButtonClass: 'q-inc',
    quantityDecrementButtonClass: 'q-dec',
    quantityNumberFieldClass: 'q-num',
    disableDecrementAtOne: true,
  })
</script>
Learn How to Use This
Open Specific Tabs from other Pages
</ head> Code
</ body> Code
<!-- OPEN SPECIFIC TABS -->
<script>
// get the webflow array or define a new one if none exists
var Webflow = Webflow || [];
// push the click tabs handler function into the webflow array
Webflow.push(function () {
  // get the respective tab name using the getParam function and store it in a tabName variable
  var tabName = getParam('tab');
  // terminate the function if no tab name was found
  if (!tabName) return;

  // click on the tab
  $('.' + tabName).triggerHandler('click');

  // define the getParam function
  function getParam(name) {
    // replace any '[' in the tab name with '\['
    // & also replace any ']' in the tab name with '\]'
    // this escapes the symbols '[' & ']' so they can be used in regex
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    // define a regex to search for the tab name
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      // search for the tab name in the query string part of the page's url
      results = regex.exec(location.search);
    // return the tab name OR "" if no tab name found
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
});
</script>
Learn How to Use This
Cookie Notice
</ head> Code
<!-- Add the COOKIE CONSENT css -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
</ body> Code
<!-- Add the COOKIE CONSENT dependency script file --> 
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>

<script>
// initialize cookieconsent & define options
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#ebe5ca",       // Background color for popup card
      "text": "#000000"              // Main text color for message
    },
    "button": {
      "background": "#a09e91",       // Background color for button (use "transparent" if you use the "wire" theme below.     "
      "text": "#fcf8f2",             // Button text color
      //border: "#a09e91"            // Remove the first "//" if you plan on using the wire theme below
    }
  },
  "theme": "block",               // Theme options: "edgeless", "block", "classic", "wire"  
  "position": "bottom-right",        // Positions options: "bottom-right", "bottom-left", "top", "bottom" 
  "static": false,                  // Set to "true" only if you choose "top" for the position which will push your content down instead of covering it.
  "content": {
    // Main message text on the cookie popup
    "message": "This website uses cookies to ensure you get the best experience on our website.",
    
    // Button text to accept
    "dismiss": "Got it!",
    
    // Button Link to your cookie policy or remove this line if you want it to go to: https://www.cookiesandyou.com/ (info site about cookies for your visitors)
    "href": "https://yoursite.com/cookie-policy"        
  }
});
</script>
Learn How to Use This
Math Captcha for Forms
</ head> Code
</ body> Code
<!-- MATH CAPTCHA --> 
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/math-captcha@0.1.7/index.min.js"></script>

<script>
  window.CodeCrumbs.MathCaptcha({
    formClassSelector: ".contact-form",
    captchaLabelSelector: ".math-label",
    captchaInputSelector: ".math-field",
    validTargetAttribute: "valid-captcha-class",
    invalidTargetAttribute: "invalid-captcha-class",
    removeClassesOnEmptyInput: true
  })
</script>
Learn How to Use This
Apple Frost Blur
</ head> Code
<!-- APPLE FROST BLUR --> 
<style>
.frost-blur {
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}
</style>
</ body> Code
Learn How to Use This
Disable Form Submit with the "Enter" Key
</ head> Code
</ body> Code
<!-- DISABLE SUBMIT WITH ENTER KEY --> 
<script>
$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});
</script>
Learn How to Use This
Custom Selection & Highlight Color
</ head> Code
<!-- CUSTOM SELECTION / HIGHLIGHT COLOR --> 
<style>
	:-moz-selection { color: #000; background: #90fcdc;}
	::selection { color: #000; background: #90fcdc;}
</style>
</ body> Code
Learn How to Use This
Reveal Submit Button When Email is Validated
</ head> Code
</ body> Code
<!-- REVEAL SUBMIT BUTTON WHEN EMAIL IS VALIDATED --> 
<script>
  $(function(){

    // Only show submit button on proper email
    ;( function( $, window, document, undefined ) {
        'use strict';
        var form        = '.email-form',
            className   = 'email-active',
            submit      = 'input[type="submit"]',
            email       = 'input[type="email"]';
        $( form ).each( function(){
            var $form   = $( this ),
                $email  = $form.find( email ),
                $submit  = $form.find( submit ),
                val     = '';
            $email.on( 'keyup.addClassWhenEmail', function(){
                val = $email.val();
                $submit.toggleClass( className, val != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( val ) );    
            });
        });
    })( jQuery, window, document );
  })
</script>
Learn How to Use This
Dynamic Weekday
</ head> Code
</ body> Code
<!-- DYNAMIC WEEKDAY --> 
<script>
// for each .weekday element
document.querySelectorAll('.weekday').forEach(weekday => {
  // get today's day
  const today = new Intl.DateTimeFormat('en', {weekday:'long'}).format(new Date());
  // set it as the current text
  weekday.textContent = today;
});
</script>
Learn How to Use This
Dynamic Copyright Year
</ head> Code
</ body> Code
For using a class selector to target multiple elements on the same page:
<!-- Dynamic Copyright Year -->
<script>
// For using a class to select multiple elements
const yearElems = document.querySelectorAll(".year")

yearElems.forEach(function(yearElem) {
  yearElem.innerText = new Date().getFullYear()
})
</script>
For using an ID selector to target a single element on a page:
<!-- Dynamic Copyright Year -->
<script>
// For targeting a single element using ID
 function copyrightYear() {
   const yearElem = document.getElementById("year")
   yearElem.innerText = new Date().getFullYear()
 }
copyrightYear()
</script>
Learn How to Use This
Browser Back Button
</ head> Code
</ body> Code
<!-- Browser Back Button -->
<script>
$( document ).ready(function() {
	$( ".back-button__class-name" ).click(function() { // Create any class name between the " ". Then add this class name to any back button on that page.  
		window.history.back();
	});
});
</script>
Learn How to Use This
Custom Select Field
</ head> Code
<!-- Custom Select Field Styles --> 
<style>
  /************ ADD YOUR VALUES BELOW ************/
  :root {
    /* ----------- Colors ----------- */
		--list-bg-color: white;
    --list-text-color: inherit; /* Use "inherit" to take on parent text color */
    --select-field-arrow-color: black; /* This is the select field arrow color */
    --border-color-active: black; /* Active State */
    --border-color-hover: #dcdcdd; /* Select Field could be the same as your form field border color */
    --list-item-bg-color: #ededed; /* Select Field Hover/Focus State */

    /* ----------- Spacing ----------- */
    --select-field-padding-left: 12px; /* Match the padding values for your form fields */
    --select-field-padding-right: 12px; /* Match the padding values for your form fields */
    --list-padding-top-bottom: 10px; /* This is the top and bottom padding for the dropdown list */
    --list-max-height: 150px; /* You can set this to "Auto" as well */
    --list-item-padding-left: 18px; 
    --list-item-padding-right: 18px;
    --list-item-min-height: 40px; /* This is the height of each list item in the dropdown */
    --list-item-line-height: 40px; /* This is the height of each list item in the dropdown */

             /* ^^^  Make sure both "line-height" and "min-height" are the same! ^^^  */
  }
  /************ END OF CUSTOM VALUES ************/



  .nice-select {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    clear: both;
    padding-left: var(--select-field-padding-left);
    padding-right: var(--select-field-padding-right);
    position: relative;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    white-space: nowrap; 
  }


  .nice-select:hover {
    border-color: var(--border-color-hover); 
  }


  .nice-select:active, .nice-select.open, .nice-select:focus {
    border-color: var(--border-color-active);
  }


  .nice-select:after {
    border-bottom: 2px solid var(--select-field-arrow-color);
    border-right: 2px solid var(--select-field-arrow-color);
    content: '';
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 5px; 
  }


  .nice-select.open:after {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg); 
  }


  .nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0); 
  }


  .nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none; 
  }


  .nice-select.disabled:after {
    border-color: #cccccc; 
  }


  .nice-select.wide {
    width: 100%; 
  }


  .nice-select.wide .list {
    left: 0 !important;
    right: 0 !important; 
  }


  .nice-select.right {
    float: right; 
  }


  .nice-select.right .list {
    left: auto;
    right: 0; 
  }


  .nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px; 
  }


  .nice-select.small:after {
    height: 4px;
    width: 4px; 
  }


  .nice-select.small .option {
    line-height: 34px;
    min-height: 34px; 
  }


  .nice-select .list {
    background-color: var(--list-bg-color);
    color: var(--list-text-color);
    border-radius: 5px;
    box-shadow: 0 7px 20px 0px rgba(68, 68, 68, 0.11);
    border-color: 3px solid #ededed;
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: var(--list-padding-top-bottom) 0px;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: var(--list-max-height);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9; 
  }


  .nice-select .list:hover .option:not(:hover) {
    background-color: transparent !important; 
  }


  .nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: var(--list-item-line-height);
    list-style: none;
    min-height: var(--list-item-min-height);
    outline: none;
    padding-left: var(--list-item-padding-left);
    padding-right: var(--list-item-padding-right);
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }

  .nice-select .option:first-child {
    display: none;
  }

  span.current {
    color: var(--list-text-color);
  }

  .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
    background-color: var(--list-item-bg-color);
  }

  .nice-select .option.selected {
    font-weight: bold; 
  }

  .nice-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default; 
  }

  .no-csspointerevents .nice-select .list {
  display: none; 
  }

  .no-csspointerevents .nice-select.open .list {
  display: block; 
  }
</style>
</ body> Code
<!-- CUSTOM SELECT FIELD --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>

<script>
	$(document).ready(function() {
  	$('select').niceSelect();
	});
</script>
Learn How to Use This
Custom Placeholder Animation
</ head> Code
<!-- Input Field Placeholder Animation --> 
<style>
  ::placeholder {
  	transition: all 350ms ease;
  }
  
  .your-input-class:focus::placeholder {
  	transform: translate(20px, 0);
    opacity: 0.0;
  }
  
  .your-textarea-class:focus::placeholder {
  	transform: translate(20px, 0);
    opacity: 0.0;
  }
</style>
</ body> Code
Learn How to Use This
HTML Tables
</ head> Code
</ body> Code
Learn How to Use This
Coupon Copy-to-Clipboard
</ head> Code
</ body> Code
<!-- COUPON COPY TO CLIPBOARD --> 
<script>
// change SAVE20NOW to whatever coupon or text you want to be copied
$('.coupon-field').val('SAVE20NOW')
                  .prop('readOnly', true)
                  .css( 'cursor', 'text' );

// on .copy-btn click
$('.copy-btn').click(function(){
  // copy the .coupon-field's value
  copyToClipboard($('.coupon-field').val());
  
  // save the .copy-btn's original text
  const origText = $(this).text();
  // save the .copy-btn's original font color
  const origColor = $(this).css('color');
  
  // change the .copy-btn's text
  $(this).text('Copied! 🤙');
  // change the .copy-btn's font color
  $(this).css('color', '#1fbd41');
  
  setTimeout(()=>{ // after a 2 sec setTimeout
    $(this).text(origText); // reset text back to original
    $(this).css('color', origColor); // reset font color back to original
  }, 2000);
});

// define copyToClipboard function
function copyToClipboard(str){
  // Create new element
  const el = document.createElement('textarea');
  // Set value (string to be copied)
  el.value = str;
  // Set non-editable to avoid focus and move outside of view
  el.setAttribute('readonly', '');
  el.style = {position: 'absolute', left: '-9999px'};
  document.body.appendChild(el);
  // Select text inside element
  el.select();
  // Copy text to clipboard
  document.execCommand('copy');
  // Remove temporary element
  document.body.removeChild(el);
}
</script>
Learn How to Use This
Simple JQuery Accordion
</ head> Code
<!-- Closes Simple JQuery Accordion Bodies on Published Site --> 
<style>
/* Hide Accordion Body */
.acc-body {
	display: none;
}
</style>
</ body> Code
<!-- Simple JQuery Accordion --> 
<script>
(function ($) {
	'use strict'; 
  	// Targeting the head/button of the accordion item to run a function when it's clicked
		$('.acc-head').on("click", function () {
    	// Looking for the next sibling within this accordion item, which is the body (for content) of the accordion to show and slide open  
			$(this).next().slideToggle(300); // 300 is the milliseconds on open
      // Finds any body of any accordion that is NOT the one currently being clicked on to hide and slide closed
			$('.acc-body').not($(this).next()).slideUp('fast');
		});
}(jQuery));
</script>
Learn How to Use This
Ignore Pointer (Cursor) Events
</ head> Code
<!-- Ignore Cursor Events --> 
<style>
/* disable any cursor events e.g. click & hover */
.your-class-name {
	pointer-events: none;
}
</style>
</ body> Code
Learn How to Use This
Remove iOS Form Styles
</ head> Code
<!--Removes iOS form styling--> 
<style>
/* Set css appearance to none & border radius to 0 */
input, textarea {
  -webkit-appearance: none; /* webkit browsers */
  -moz-appearance: none; /* firefox browser */
  appearance: none;
  border-radius: 0;  
}
</style>
</ body> Code
Learn How to Use This
Reset Webflow Form
</ head> Code
</ body> Code
<!-- RESET WEBFLOW FORM AFTER SUBMIT --> 
<script>
// when the DOM is ready
$(function() {
  /*** START SCRIPT CONFIG ***/

  // Replace with value for your form. ie. "#your-form-id" or ".your-form-class"
  var FORM_SELECTOR = ".your-class";

  // Do you want to hide the success message after the form is submitted?
  var HIDE_SUCCESS_MESSAGE = false;
  
  // Do you want the success message to show above the form?
  var SUCCESS_MESSAGE_ABOVE_FORM = true;

  /*** END SCRIPT CONFIG ***/

  // define the resetCustomElement function
  var resetCustomElement = function(customElement) {
    // get the input element
    var inputElement = customElement.nextSibling;
    // if it's checked
    if (inputElement.checked) {
      // add the class "w--redirected-checked"
      customElement.classList.add("w--redirected-checked");
    } else {  // if not checked
      // remove the class "w--redirected-checked"
      customElement.classList.remove("w--redirected-checked");
    }
  };

  // define the resetForm function
  var resetForm = function(form, successDiv) {
    // Reset the inputs in the form
    form.reset();

    // Reset custom checkboxes
    document.querySelectorAll(".w-checkbox-input--inputType-custom").forEach(resetCustomElement);

    // Reset custom radio buttons
    document.querySelectorAll(".w-form-formradioinput--inputType-custom").forEach(resetCustomElement);

    // Show the form
    form.style.display = "block";

    // Hide Success Message
    if (HIDE_SUCCESS_MESSAGE) {
      successDiv.style.display = "none";
    }
  };

  // get the form
  var form = document.querySelector(FORM_SELECTOR);
  // get the successdiv
  var successDiv = form.nextSibling;
  
  // If we are not hiding the success message AND we want the message above the form
  if (!HIDE_SUCCESS_MESSAGE && SUCCESS_MESSAGE_ABOVE_FORM) {
    // Move the form last so that the success message appears before it
    form.parentElement.appendChild(form);
  }

  // Create an observer to run our resetForm function when Webflow hides our form after submission
  var observer = new MutationObserver(function(mutations) {
    // if the form's display is set to none
    if (form.style.display === "none") {
      // call the resetForm function
      resetForm(form, successDiv);
    }
  });

  // Listen for when the style attribute of our form changes
  observer.observe(form, { attributes: true, attributeFilter: ["style"] });
});
</script>
Learn How to Use This
Reset Webflow Form
</ head> Code
</ body> Code
<!-- RESET WEBFLOW FORM AFTER SUBMIT --> 
<script>
// when the DOM is ready
$(function() {
  /*** START SCRIPT CONFIG ***/

  // Replace with value for your form. ie. "#your-form-id" or ".your-form-class"
  var FORM_SELECTOR = ".your-class";

  // Do you want to hide the success message after the form is submitted?
  var HIDE_SUCCESS_MESSAGE = false;
  
  // Do you want the success message to show above the form?
  var SUCCESS_MESSAGE_ABOVE_FORM = true;

  /*** END SCRIPT CONFIG ***/

  // define the resetCustomElement function
  var resetCustomElement = function(customElement) {
    // get the input element
    var inputElement = customElement.nextSibling;
    // if it's checked
    if (inputElement.checked) {
      // add the class "w--redirected-checked"
      customElement.classList.add("w--redirected-checked");
    } else {  // if not checked
      // remove the class "w--redirected-checked"
      customElement.classList.remove("w--redirected-checked");
    }
  };

  // define the resetForm function
  var resetForm = function(form, successDiv) {
    // Reset the inputs in the form
    form.reset();

    // Reset custom checkboxes
    document.querySelectorAll(".w-checkbox-input--inputType-custom").forEach(resetCustomElement);

    // Reset custom radio buttons
    document.querySelectorAll(".w-form-formradioinput--inputType-custom").forEach(resetCustomElement);

    // Show the form
    form.style.display = "block";

    // Hide Success Message
    if (HIDE_SUCCESS_MESSAGE) {
      successDiv.style.display = "none";
    }
  };

  // get the form
  var form = document.querySelector(FORM_SELECTOR);
  // get the successdiv
  var successDiv = form.nextSibling;
  
  // If we are not hiding the success message AND we want the message above the form
  if (!HIDE_SUCCESS_MESSAGE && SUCCESS_MESSAGE_ABOVE_FORM) {
    // Move the form last so that the success message appears before it
    form.parentElement.appendChild(form);
  }

  // Create an observer to run our resetForm function when Webflow hides our form after submission
  var observer = new MutationObserver(function(mutations) {
    // if the form's display is set to none
    if (form.style.display === "none") {
      // call the resetForm function
      resetForm(form, successDiv);
    }
  });

  // Listen for when the style attribute of our form changes
  observer.observe(form, { attributes: true, attributeFilter: ["style"] });
});
</script>
Learn How to Use This
Simple JQuery Accordion
</ head> Code
<!-- Closes Simple JQuery Accordion Bodies on Published Site --> 
<style>
/* Hide Accordion Body */
.acc-body {
	display: none;
}
</style>
</ body> Code
<!-- Simple JQuery Accordion --> 
<script>
(function ($) {
	'use strict'; 
  	// Targeting the head/button of the accordion item to run a function when it's clicked
		$('.acc-head').on("click", function () {
    	// Looking for the next sibling within this accordion item, which is the body (for content) of the accordion to show and slide open  
			$(this).next().slideToggle(300); // 300 is the milliseconds on open
      // Finds any body of any accordion that is NOT the one currently being clicked on to hide and slide closed
			$('.acc-body').not($(this).next()).slideUp('fast');
		});
}(jQuery));
</script>
Learn How to Use This
Coupon Copy-to-Clipboard
</ head> Code
</ body> Code
<!-- COUPON COPY TO CLIPBOARD --> 
<script>
// change SAVE20NOW to whatever coupon or text you want to be copied
$('.coupon-field').val('SAVE20NOW')
                  .prop('readOnly', true)
                  .css( 'cursor', 'text' );

// on .copy-btn click
$('.copy-btn').click(function(){
  // copy the .coupon-field's value
  copyToClipboard($('.coupon-field').val());
  
  // save the .copy-btn's original text
  const origText = $(this).text();
  // save the .copy-btn's original font color
  const origColor = $(this).css('color');
  
  // change the .copy-btn's text
  $(this).text('Copied! 🤙');
  // change the .copy-btn's font color
  $(this).css('color', '#1fbd41');
  
  setTimeout(()=>{ // after a 2 sec setTimeout
    $(this).text(origText); // reset text back to original
    $(this).css('color', origColor); // reset font color back to original
  }, 2000);
});

// define copyToClipboard function
function copyToClipboard(str){
  // Create new element
  const el = document.createElement('textarea');
  // Set value (string to be copied)
  el.value = str;
  // Set non-editable to avoid focus and move outside of view
  el.setAttribute('readonly', '');
  el.style = {position: 'absolute', left: '-9999px'};
  document.body.appendChild(el);
  // Select text inside element
  el.select();
  // Copy text to clipboard
  document.execCommand('copy');
  // Remove temporary element
  document.body.removeChild(el);
}
</script>
Learn How to Use This
Custom Select Field
</ head> Code
<!-- Custom Select Field Styles --> 
<style>
  /************ ADD YOUR VALUES BELOW ************/
  :root {
    /* ----------- Colors ----------- */
		--list-bg-color: white;
    --list-text-color: inherit; /* Use "inherit" to take on parent text color */
    --select-field-arrow-color: black; /* This is the select field arrow color */
    --border-color-active: black; /* Active State */
    --border-color-hover: #dcdcdd; /* Select Field could be the same as your form field border color */
    --list-item-bg-color: #ededed; /* Select Field Hover/Focus State */

    /* ----------- Spacing ----------- */
    --select-field-padding-left: 12px; /* Match the padding values for your form fields */
    --select-field-padding-right: 12px; /* Match the padding values for your form fields */
    --list-padding-top-bottom: 10px; /* This is the top and bottom padding for the dropdown list */
    --list-max-height: 150px; /* You can set this to "Auto" as well */
    --list-item-padding-left: 18px; 
    --list-item-padding-right: 18px;
    --list-item-min-height: 40px; /* This is the height of each list item in the dropdown */
    --list-item-line-height: 40px; /* This is the height of each list item in the dropdown */

             /* ^^^  Make sure both "line-height" and "min-height" are the same! ^^^  */
  }
  /************ END OF CUSTOM VALUES ************/



  .nice-select {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    clear: both;
    padding-left: var(--select-field-padding-left);
    padding-right: var(--select-field-padding-right);
    position: relative;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    white-space: nowrap; 
  }


  .nice-select:hover {
    border-color: var(--border-color-hover); 
  }


  .nice-select:active, .nice-select.open, .nice-select:focus {
    border-color: var(--border-color-active);
  }


  .nice-select:after {
    border-bottom: 2px solid var(--select-field-arrow-color);
    border-right: 2px solid var(--select-field-arrow-color);
    content: '';
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 5px; 
  }


  .nice-select.open:after {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg); 
  }


  .nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0); 
  }


  .nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none; 
  }


  .nice-select.disabled:after {
    border-color: #cccccc; 
  }


  .nice-select.wide {
    width: 100%; 
  }


  .nice-select.wide .list {
    left: 0 !important;
    right: 0 !important; 
  }


  .nice-select.right {
    float: right; 
  }


  .nice-select.right .list {
    left: auto;
    right: 0; 
  }


  .nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px; 
  }


  .nice-select.small:after {
    height: 4px;
    width: 4px; 
  }


  .nice-select.small .option {
    line-height: 34px;
    min-height: 34px; 
  }


  .nice-select .list {
    background-color: var(--list-bg-color);
    color: var(--list-text-color);
    border-radius: 5px;
    box-shadow: 0 7px 20px 0px rgba(68, 68, 68, 0.11);
    border-color: 3px solid #ededed;
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: var(--list-padding-top-bottom) 0px;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: var(--list-max-height);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9; 
  }


  .nice-select .list:hover .option:not(:hover) {
    background-color: transparent !important; 
  }


  .nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: var(--list-item-line-height);
    list-style: none;
    min-height: var(--list-item-min-height);
    outline: none;
    padding-left: var(--list-item-padding-left);
    padding-right: var(--list-item-padding-right);
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }

  .nice-select .option:first-child {
    display: none;
  }

  span.current {
    color: var(--list-text-color);
  }

  .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
    background-color: var(--list-item-bg-color);
  }

  .nice-select .option.selected {
    font-weight: bold; 
  }

  .nice-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default; 
  }

  .no-csspointerevents .nice-select .list {
  display: none; 
  }

  .no-csspointerevents .nice-select.open .list {
  display: block; 
  }
</style>
</ body> Code
<!-- CUSTOM SELECT FIELD --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>

<script>
	$(document).ready(function() {
  	$('select').niceSelect();
	});
</script>
Learn How to Use This
Browser Back Button
</ head> Code
</ body> Code
<!-- Browser Back Button -->
<script>
$( document ).ready(function() {
	$( ".back-button__class-name" ).click(function() { // Create any class name between the " ". Then add this class name to any back button on that page.  
		window.history.back();
	});
});
</script>
Learn How to Use This
Dynamic Copyright Year
</ head> Code
</ body> Code
For using a class selector to target multiple elements on the same page:
<!-- Dynamic Copyright Year -->
<script>
// For using a class to select multiple elements
const yearElems = document.querySelectorAll(".year")

yearElems.forEach(function(yearElem) {
  yearElem.innerText = new Date().getFullYear()
})
</script>
For using an ID selector to target a single element on a page:
<!-- Dynamic Copyright Year -->
<script>
// For targeting a single element using ID
 function copyrightYear() {
   const yearElem = document.getElementById("year")
   yearElem.innerText = new Date().getFullYear()
 }
copyrightYear()
</script>
Learn How to Use This
Dynamic Weekday
</ head> Code
</ body> Code
<!-- DYNAMIC WEEKDAY --> 
<script>
// for each .weekday element
document.querySelectorAll('.weekday').forEach(weekday => {
  // get today's day
  const today = new Intl.DateTimeFormat('en', {weekday:'long'}).format(new Date());
  // set it as the current text
  weekday.textContent = today;
});
</script>
Learn How to Use This
Reveal Submit Button When Email is Validated
</ head> Code
</ body> Code
<!-- REVEAL SUBMIT BUTTON WHEN EMAIL IS VALIDATED --> 
<script>
  $(function(){

    // Only show submit button on proper email
    ;( function( $, window, document, undefined ) {
        'use strict';
        var form        = '.email-form',
            className   = 'email-active',
            submit      = 'input[type="submit"]',
            email       = 'input[type="email"]';
        $( form ).each( function(){
            var $form   = $( this ),
                $email  = $form.find( email ),
                $submit  = $form.find( submit ),
                val     = '';
            $email.on( 'keyup.addClassWhenEmail', function(){
                val = $email.val();
                $submit.toggleClass( className, val != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( val ) );    
            });
        });
    })( jQuery, window, document );
  })
</script>
Learn How to Use This
Disable Form Submit with the "Enter" Key
</ head> Code
</ body> Code
<!-- DISABLE SUBMIT WITH ENTER KEY --> 
<script>
$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});
</script>
Learn How to Use This
Math Captcha for Forms
</ head> Code
</ body> Code
<!-- MATH CAPTCHA --> 
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/math-captcha@0.1.7/index.min.js"></script>

<script>
  window.CodeCrumbs.MathCaptcha({
    formClassSelector: ".contact-form",
    captchaLabelSelector: ".math-label",
    captchaInputSelector: ".math-field",
    validTargetAttribute: "valid-captcha-class",
    invalidTargetAttribute: "invalid-captcha-class",
    removeClassesOnEmptyInput: true
  })
</script>
Learn How to Use This
Cookie Notice
</ head> Code
<!-- Add the COOKIE CONSENT css -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
</ body> Code
<!-- Add the COOKIE CONSENT dependency script file --> 
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>

<script>
// initialize cookieconsent & define options
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#ebe5ca",       // Background color for popup card
      "text": "#000000"              // Main text color for message
    },
    "button": {
      "background": "#a09e91",       // Background color for button (use "transparent" if you use the "wire" theme below.     "
      "text": "#fcf8f2",             // Button text color
      //border: "#a09e91"            // Remove the first "//" if you plan on using the wire theme below
    }
  },
  "theme": "block",               // Theme options: "edgeless", "block", "classic", "wire"  
  "position": "bottom-right",        // Positions options: "bottom-right", "bottom-left", "top", "bottom" 
  "static": false,                  // Set to "true" only if you choose "top" for the position which will push your content down instead of covering it.
  "content": {
    // Main message text on the cookie popup
    "message": "This website uses cookies to ensure you get the best experience on our website.",
    
    // Button text to accept
    "dismiss": "Got it!",
    
    // Button Link to your cookie policy or remove this line if you want it to go to: https://www.cookiesandyou.com/ (info site about cookies for your visitors)
    "href": "https://yoursite.com/cookie-policy"        
  }
});
</script>
Learn How to Use This
Open Specific Tabs from other Pages
</ head> Code
</ body> Code
<!-- OPEN SPECIFIC TABS -->
<script>
// get the webflow array or define a new one if none exists
var Webflow = Webflow || [];
// push the click tabs handler function into the webflow array
Webflow.push(function () {
  // get the respective tab name using the getParam function and store it in a tabName variable
  var tabName = getParam('tab');
  // terminate the function if no tab name was found
  if (!tabName) return;

  // click on the tab
  $('.' + tabName).triggerHandler('click');

  // define the getParam function
  function getParam(name) {
    // replace any '[' in the tab name with '\['
    // & also replace any ']' in the tab name with '\]'
    // this escapes the symbols '[' & ']' so they can be used in regex
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    // define a regex to search for the tab name
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      // search for the tab name in the query string part of the page's url
      results = regex.exec(location.search);
    // return the tab name OR "" if no tab name found
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
});
</script>
Learn How to Use This
Custom Quantity Buttons
</ head> Code
<!-- CUSTOM QUANTITY BUTTONS -->
<style>
/* remove form styles & set margin at 0 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>
</ body> Code
With Code Comments:
<!-- CUSTOM QUANTITY BUTTONS --> 
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/quantity-buttons@v0.1.4/index.min.js"></script>  

<script>
  window.CodeCrumbs.QuantityButtons({
    quantityGroupClass: 'q-group',
    quantityIncrementButtonClass: 'q-inc',
    quantityDecrementButtonClass: 'q-dec',
    quantityNumberFieldClass: 'q-num',
    disableDecrementAtOne: true,
  })
</script>
Learn How to Use This
Custom Javascript Accordion
</ head> Code
<!-- Javascript Accordion Styles -->
<style>
.js-accordion-body {
	display: none;
}
</style>
</ body> Code
<!-- Javascript Accordion -->
<script>
// Accordion Settings 
const accSettings = {
  speed: 300, // Animation speed
  oneOpen: true, // Close all other accordion items if true
  offsetAnchor: true, // Activate scroll to top for active item
  offsetFromTop: 180, // In pixels – Scroll to top at what distance
  scrollTopDelay: 400, // In Milliseconds – Delay before scroll to top 
  
  classes: {
  	accordion: 'js-accordion',
    header: 'js-accordion-header',
    item: 'js-accordion-item',
    body: 'js-accordion-body',
    icon: 'js-accordion-icon',
    active: 'active',
  }
};


const prefix = accSettings.classes

const accordion = (function(){
  const accordionElem = $(`.${prefix.accordion}`)
  const accordionHeader = accordionElem.find(`.${prefix.header}`)
  const accordionItem = $(`.${prefix.item}`)
  const accordionBody = $(`.${prefix.body}`)
  const accordionIcon = $(`.${prefix.icon}`)
  const activeClass = prefix.active
    
  return {
    // pass configurable object literal
    init: function(settings) {
      accordionHeader.on('click', function() {
        accordion.toggle($(this));
        if(accSettings.offsetAnchor) {
        	setTimeout(() => { 
        		$('html').animate({scrollTop: $(this).offset().top-accSettings.offsetFromTop}, accSettings.speed);
    			}, accSettings.scrollTopDelay);
        }
      });
      
      $.extend(accSettings, settings); 
      
      // ensure only one accordion is active if oneOpen is true
      if(settings.oneOpen && $(`.${prefix.item}.${activeClass}`).length > 1) {
        $(`.${prefix.item}.${activeClass}:not(:first)`).removeClass(activeClass).find(`.${prefix.header} > .${prefix.icon}`).removeClass(activeClass);
      }
      // reveal the active accordion bodies
      $(`.${prefix.item}.${activeClass}`).find(`> .${prefix.body}`).show();
      
    },
    
    toggle: function($this) {
      if(accSettings.oneOpen && $this[0] != $this.closest(accordionElem).find(`> .${prefix.item}.${activeClass} > .${prefix.header}`)[0]) {
        $this.closest(accordionElem).find(`> .${prefix.item}`).removeClass(activeClass).find(accordionBody).slideUp(accSettings.speed);
        $this.closest(accordionElem).find(`> .${prefix.item}`).find(`> .${prefix.header} > .${prefix.icon}`).removeClass(activeClass);
      }
      
      // show/hide the clicked accordion item
      $this.closest(accordionItem).toggleClass(`${activeClass}`).find(`> .${prefix.header} > .${prefix.icon}`).toggleClass(activeClass);
      $this.next().stop().slideToggle(accSettings.speed);
    }
  }
})();

$(document).ready(function(){
  accordion.init(accSettings);
});
</script>
Learn How to Use This
Datepicker
</ head> Code
<!-- DATE PICKER STYLES -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<style>
:root {
	/* Color Settings */
  --accent-color: #7262e6;							/* Controls BG Color for Selected Date */
  --secondary-accent-color: #9287e2;		/* Controls Text Color for Current Date */
	--main-bg-color: #1f2023;							/* Controls BG Color of the Calendar */
  --secondary-bg-color: #27292d;				/* Controls BG for Calendar Dates */
  --heading-color: #ffffff;							/* Controls Main Heading Color */
  --font-color: #c1c9d2;								/* Controls Main Font Color */
  --accent-top-text-color: #ffffff;			/* Controls Font Color on top of Accent Color */
  --disabled-font-color: #999999;				/* Controls Disabled Font Color */
  --shadow-color: 0 5px 15px -5px rgba(0,0,0,.5);
  
  /* Size & Spacing Settings */
  --border-radius: 4px;									/* Controls Large Border Radius (Calendar Itself) */
  --border-radius-sm: 2px;							/* Controls Small Border Radius (Calendar Dates) */
  --font-size: 16px;										/* Controls Font Size */
  --table-gap: 2px;											/* High number is not recommended */
  
  /* Arrow Icons */
  --left-arrow: url('https://assets-global.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dd958382e006f4eb2033_chevron-left.svg');
  --right-arrow: url('https://assets-global.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dbca268421b03c01abf6_chevron-right.svg');   
  --arrow-bg-color: transparent;
}



/* Picker Element Itself */
.pika-single {
  color: var(--heading-color);
  background: var(--main-bg-color);
  border: none !important;
  border-bottom-color: none !important;
  border-radius: var(--border-radius);
  font-family: inherit !important;
}

/* Datepicker Shadow */
.pika-single.is-bound {
  box-shadow: var(--shadow-color) !important;
}

/* Month & Year Displayed in Middle */
.pika-label {
  color: var(--heading-color);
  background-color: transparent !important;
}

.pika-prev, .is-rtl .pika-next {
	background-image: var(--left-arrow);
}
.pika-next, .is-rtl .pika-prev {
  background-image: var(--right-arrow);
}

/* This is the table element which includes the days labels and the days in the month */
.pika-table {
	border-spacing: var(--table-gap) !important;
  border-collapse: separate;
  font-size: var(--font-size) !important;
}

/* Days of the Week Labels */
.pika-table th {
  color: var(--font-color);
  text-align: center;
}

/* Days of the Week Underline - Example = underline dotted */
abbr[title] {
  text-decoration: none !important;
  cursor: default !important;
}

/* Month Days on Calendar - Default State */
.pika-button {
  color: var(--font-color);
  background: var(--secondary-bg-color);
  border-radius: var(--border-radius-sm);
  text-align: center;
  font-size: 12px !important;
}

/* Week Label */
.pika-week {
  color: var(--font-color);
}

/* Current Day Text/Number Color */
.is-today .pika-button {
  color: var(--secondary-accent-color) !important;
}

/* The Selected Date/Day */
.is-selected .pika-button {
  color: var(--accent-top-text-color) !Important;
  background: var(--accent-color);
  box-shadow: none !important;
}

/* Styles for any Disabled Dates/Days  */
.is-disabled .pika-button {
  color: var(--disabled-font-color);
  opacity: .3;
  background: transparent !important;
}

/* Styles for Date/Day Hover (can be same styles as "selected" styles) */
.pika-button:hover {
  color: var(--accent-top-text-color) !important;
  background: var(--accent-color) !important;
  border-radius: var(--border-radius-sm) !important;
}

/* Next & Prev Arrow Buttons */
.pika-prev, .pika-next {
	display: block;
	cursor: pointer;
	position: relative;
	outline: none;
	border: 0;
	padding: 0;
	width: 20px;
	height: 30px;
	text-indent: 20px;
	white-space: nowrap;
	overflow: hidden;
	background-color: var(--arrow-bg-color) !important;
	opacity: .5;
}
</style>
</ body> Code
<!-- DATE PICKER JS --> 
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<!-- FOR 'SINGLE' DATE PICKER ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
var picker = new Pikaday({ 
	field: document.getElementById('datepicker'),
	disableWeekends: true, // Disables option to select weekend days
	firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
	minDate: new Date(), // Disables option to select days prior to current day
  //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>





<!-- FOR 'MULTIPLE' DATE PICKERS ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
$('.date-picker').each(function() {  // ".date-picker" is the class name you would set on each field that needs a date picker.
    $(this).data('pikaday', new Pikaday({ 
      field: $(this)[0],
      disableWeekends: true, // Disables option to select weekend days
      firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
      minDate: new Date(), // Disables option to select days prior to current day
      //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
    }));
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>
Learn How to Use This
Floating Form Labels
</ head> Code
<!-- FORM STYLES --> 
<style>
.input-label {
	pointer-events: none;
}

.input::placeholder {
	opacity: 0;
  transition: opacity .2s ease-out;
}

.input:focus::placeholder {
	opacity: 1;
}
</style>
</ body> Code
<!-- FLOATING FORM LABELS -->
<script defer src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/floating-form-labels@0.1.1/index.min.js"></script>
<script>
window.CodeCrumbs.FloatLabels({
  inputSelector: ".input",
  labelActiveClass: "float",
})
</script>
Learn How to Use This
Find, Style & Replace Matching Strings
</ head> Code
</ body> Code
<!-- FIND, STYLE AND REPLACE MATCHING STRINGS --> 
<script>
const targetStrings = [
  {
  	selector: 'h2',
    targetString: 'String 1',
    replacementString: 'String 1 replacement',
    appendedClassName: 'class-name-here',
  },
  {
  	selector: 'p',
    targetString: 'String 2',
    replacementString: 'String 1 replacement',
    appendedClassName: 'class-name-here',
  },
]

function wrapAndReplaceMatches(selector, newClass, wordTarget, replacement) {
  const pattern = new RegExp(`\\b(${wordTarget})\\b`, 'gi');
  const hasClassAttr = newClass ? `class=${newClass}` : ''
  const wrapAndReplace = !replacement
  ? `<span ${hasClassAttr}>$1</span>`
  : `<span ${hasClassAttr}>${replacement}</span>`;
  Array.from(document.querySelectorAll(selector)).forEach((element) => {
		element.innerHTML = element.innerHTML.replace(pattern, wrapAndReplace);
	});
}

document.addEventListener('DOMContentLoaded', () => {
  targetStrings.forEach(({
  	selector,
    targetString,
    replacementString,
    appendedClassName
  }) => {
    wrapAndReplaceMatches(selector, appendedClassName, targetString, replacementString)
  })
});
</script>
Learn How to Use This
Swap All Values on Click
</ head> Code
</ body> Code
<!-- SWAP VALUES ON CLICK --> 
<script>
function setupSwitcher({
  /* Click Trigger Class */
  swapTrigger = "switcher",

  /* Essentials */
  swapText = "swap-text",
  swapDisplay = "swap-display",
  swapClass = "swap-class",
  swapUrl = "swap-url",

  /* Toggle and Add Attributes */
  swapToggleAttribute = "swap-toggle-attribute",
  swapAddAttribute = "swap-add-attribute",
  swapAddAttributeValue = "swap-add-attribute-value",

  /* Replace Attribute Value */
  swapAttributeTarget = "swap-attribute-target",
  swapTargetValue = "swap-target-value"

} = {}) {
  const swapAll = () => {
    // SWAP TEXT
    document.querySelectorAll(`[${swapText}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapText);
      const currentValue = swapDomElement.innerText;

      swapDomElement.innerText = nextValue;
      swapDomElement.setAttribute(swapText, currentValue);
    });

    // SWAP DISPLAY
    document.querySelectorAll(`[${swapDisplay}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapDisplay);
      const currentValue = swapDomElement.style.display;

      swapDomElement.style.display = nextValue;
      swapDomElement.setAttribute(swapDisplay, currentValue);
    });

    // SWAP CLASS
    document.querySelectorAll(`[${swapClass}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapClass);
      swapDomElement.classList.toggle(nextValue);
    });

    // SWAP URL
    document.querySelectorAll(`[${swapUrl}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapUrl);
      const currentValue = swapDomElement.href;

      swapDomElement.href = nextValue;
      swapDomElement.setAttribute(swapUrl, currentValue);
    });

    // TOGGLE ATTRIBUTE
    document.querySelectorAll(`[${swapToggleAttribute}]`).forEach((swapDomElement) => {
      const toggleAttribute = swapDomElement.getAttribute(
        swapToggleAttribute
      );
      swapDomElement.toggleAttribute(toggleAttribute);
    });

    // ADD ATTRIBUTE
    document.querySelectorAll(`[${swapAddAttribute}]`).forEach((swapDomElement) => {
      const newAttribute = swapDomElement.getAttribute(swapAddAttribute);
      const newAttributeValue = swapDomElement.getAttribute(
        swapAddAttributeValue
      );

      if (swapDomElement.hasAttribute(newAttribute)) {
        swapDomElement.removeAttribute(newAttribute);
      } else {
        swapDomElement.setAttribute(newAttribute, newAttributeValue);
      }
    });

    // REPLACE ATTRIBUTE VALUE
    document.querySelectorAll(`[${swapAttributeTarget}]`).forEach((swapDomElement) => {
      const attributeTarget = swapDomElement.getAttribute(
        swapAttributeTarget
      );
      let attributeValue = swapDomElement.getAttribute(attributeTarget);
      let newValue = swapDomElement.getAttribute(swapTargetValue);

      swapDomElement.setAttribute(attributeTarget, newValue);
      swapDomElement.setAttribute(swapTargetValue, attributeValue);
    });
  };

  document.querySelectorAll(`.${swapTrigger}`).forEach((switcherDomElement) => {
    switcherDomElement.addEventListener("click", swapAll);
  });
}

setupSwitcher();
</script>
Learn How to Use This
Date Picker
</ head> Code
</ body> Code
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@latest/index.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
})
</script>
Learn How to Use This
Ticker
</ head> Code
</ body> Code
<!-- CODECRUMBS TICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/ticker@0.1.5/index.min.js"></script>
<script>
window.CodeCrumbs.Ticker({
	tickerSelector: ".cc-ticker"
})
</script>
Learn How to Use This
Custom Quantity Buttons
</ head> Code
<!-- CUSTOM QUANTITY BUTTONS -->
<style>
/* remove form styles & set margin at 0 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>
</ body> Code
With Code Comments:
<!-- CUSTOM QUANTITY BUTTONS --> 
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/quantity-buttons@v0.1.4/index.min.js"></script>  

<script>
  window.CodeCrumbs.QuantityButtons({
    quantityGroupClass: 'q-group',
    quantityIncrementButtonClass: 'q-inc',
    quantityDecrementButtonClass: 'q-dec',
    quantityNumberFieldClass: 'q-num',
    disableDecrementAtOne: true,
  })
</script>
Learn How to Use This
Remove iOS Form Styles
</ head> Code
<!--Removes iOS form styling--> 
<style>
/* Set css appearance to none & border radius to 0 */
input, textarea {
  -webkit-appearance: none; /* webkit browsers */
  -moz-appearance: none; /* firefox browser */
  appearance: none;
  border-radius: 0;  
}
</style>
</ body> Code
Learn How to Use This
Ignore Pointer (Cursor) Events
</ head> Code
<!-- Ignore Cursor Events --> 
<style>
/* disable any cursor events e.g. click & hover */
.your-class-name {
	pointer-events: none;
}
</style>
</ body> Code
Learn How to Use This
HTML Tables
</ head> Code
</ body> Code
Learn How to Use This
Custom Placeholder Animation
</ head> Code
<!-- Input Field Placeholder Animation --> 
<style>
  ::placeholder {
  	transition: all 350ms ease;
  }
  
  .your-input-class:focus::placeholder {
  	transform: translate(20px, 0);
    opacity: 0.0;
  }
  
  .your-textarea-class:focus::placeholder {
  	transform: translate(20px, 0);
    opacity: 0.0;
  }
</style>
</ body> Code
Learn How to Use This
Custom Select Field
</ head> Code
<!-- Custom Select Field Styles --> 
<style>
  /************ ADD YOUR VALUES BELOW ************/
  :root {
    /* ----------- Colors ----------- */
		--list-bg-color: white;
    --list-text-color: inherit; /* Use "inherit" to take on parent text color */
    --select-field-arrow-color: black; /* This is the select field arrow color */
    --border-color-active: black; /* Active State */
    --border-color-hover: #dcdcdd; /* Select Field could be the same as your form field border color */
    --list-item-bg-color: #ededed; /* Select Field Hover/Focus State */

    /* ----------- Spacing ----------- */
    --select-field-padding-left: 12px; /* Match the padding values for your form fields */
    --select-field-padding-right: 12px; /* Match the padding values for your form fields */
    --list-padding-top-bottom: 10px; /* This is the top and bottom padding for the dropdown list */
    --list-max-height: 150px; /* You can set this to "Auto" as well */
    --list-item-padding-left: 18px; 
    --list-item-padding-right: 18px;
    --list-item-min-height: 40px; /* This is the height of each list item in the dropdown */
    --list-item-line-height: 40px; /* This is the height of each list item in the dropdown */

             /* ^^^  Make sure both "line-height" and "min-height" are the same! ^^^  */
  }
  /************ END OF CUSTOM VALUES ************/



  .nice-select {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    clear: both;
    padding-left: var(--select-field-padding-left);
    padding-right: var(--select-field-padding-right);
    position: relative;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    white-space: nowrap; 
  }


  .nice-select:hover {
    border-color: var(--border-color-hover); 
  }


  .nice-select:active, .nice-select.open, .nice-select:focus {
    border-color: var(--border-color-active);
  }


  .nice-select:after {
    border-bottom: 2px solid var(--select-field-arrow-color);
    border-right: 2px solid var(--select-field-arrow-color);
    content: '';
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 5px; 
  }


  .nice-select.open:after {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg); 
  }


  .nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0); 
  }


  .nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none; 
  }


  .nice-select.disabled:after {
    border-color: #cccccc; 
  }


  .nice-select.wide {
    width: 100%; 
  }


  .nice-select.wide .list {
    left: 0 !important;
    right: 0 !important; 
  }


  .nice-select.right {
    float: right; 
  }


  .nice-select.right .list {
    left: auto;
    right: 0; 
  }


  .nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px; 
  }


  .nice-select.small:after {
    height: 4px;
    width: 4px; 
  }


  .nice-select.small .option {
    line-height: 34px;
    min-height: 34px; 
  }


  .nice-select .list {
    background-color: var(--list-bg-color);
    color: var(--list-text-color);
    border-radius: 5px;
    box-shadow: 0 7px 20px 0px rgba(68, 68, 68, 0.11);
    border-color: 3px solid #ededed;
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: var(--list-padding-top-bottom) 0px;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: var(--list-max-height);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9; 
  }


  .nice-select .list:hover .option:not(:hover) {
    background-color: transparent !important; 
  }


  .nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: var(--list-item-line-height);
    list-style: none;
    min-height: var(--list-item-min-height);
    outline: none;
    padding-left: var(--list-item-padding-left);
    padding-right: var(--list-item-padding-right);
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }

  .nice-select .option:first-child {
    display: none;
  }

  span.current {
    color: var(--list-text-color);
  }

  .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
    background-color: var(--list-item-bg-color);
  }

  .nice-select .option.selected {
    font-weight: bold; 
  }

  .nice-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default; 
  }

  .no-csspointerevents .nice-select .list {
  display: none; 
  }

  .no-csspointerevents .nice-select.open .list {
  display: block; 
  }
</style>
</ body> Code
<!-- CUSTOM SELECT FIELD --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>

<script>
	$(document).ready(function() {
  	$('select').niceSelect();
	});
</script>
Learn How to Use This
Dynamic Copyright Year
</ head> Code
</ body> Code
For using a class selector to target multiple elements on the same page:
<!-- Dynamic Copyright Year -->
<script>
// For using a class to select multiple elements
const yearElems = document.querySelectorAll(".year")

yearElems.forEach(function(yearElem) {
  yearElem.innerText = new Date().getFullYear()
})
</script>
For using an ID selector to target a single element on a page:
<!-- Dynamic Copyright Year -->
<script>
// For targeting a single element using ID
 function copyrightYear() {
   const yearElem = document.getElementById("year")
   yearElem.innerText = new Date().getFullYear()
 }
copyrightYear()
</script>
Learn How to Use This
Dynamic Weekday
</ head> Code
</ body> Code
<!-- DYNAMIC WEEKDAY --> 
<script>
// for each .weekday element
document.querySelectorAll('.weekday').forEach(weekday => {
  // get today's day
  const today = new Intl.DateTimeFormat('en', {weekday:'long'}).format(new Date());
  // set it as the current text
  weekday.textContent = today;
});
</script>
Learn How to Use This
Reveal Submit Button When Email is Validated
</ head> Code
</ body> Code
<!-- REVEAL SUBMIT BUTTON WHEN EMAIL IS VALIDATED --> 
<script>
  $(function(){

    // Only show submit button on proper email
    ;( function( $, window, document, undefined ) {
        'use strict';
        var form        = '.email-form',
            className   = 'email-active',
            submit      = 'input[type="submit"]',
            email       = 'input[type="email"]';
        $( form ).each( function(){
            var $form   = $( this ),
                $email  = $form.find( email ),
                $submit  = $form.find( submit ),
                val     = '';
            $email.on( 'keyup.addClassWhenEmail', function(){
                val = $email.val();
                $submit.toggleClass( className, val != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( val ) );    
            });
        });
    })( jQuery, window, document );
  })
</script>
Learn How to Use This
Custom Selection & Highlight Color
</ head> Code
<!-- CUSTOM SELECTION / HIGHLIGHT COLOR --> 
<style>
	:-moz-selection { color: #000; background: #90fcdc;}
	::selection { color: #000; background: #90fcdc;}
</style>
</ body> Code
Learn How to Use This
Apple Frost Blur
</ head> Code
<!-- APPLE FROST BLUR --> 
<style>
.frost-blur {
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}
</style>
</ body> Code
Learn How to Use This
Disable User Select
</ head> Code
<!-- DISABLES TEXT SELECT -->
<style>
/* disable user selection of an element */
.noselect {
  -webkit-user-select: none; /* webkit browsers */
  -khtml-user-select: none; /* Konqueror browser */
  -moz-user-select: none; /* firefox browser */
  -ms-user-select: none; /* internet explorer & edge */
  user-select: none;
}
</style>
</ body> Code
Learn How to Use This
Custom Javascript Accordion
</ head> Code
<!-- Javascript Accordion Styles -->
<style>
.js-accordion-body {
	display: none;
}
</style>
</ body> Code
<!-- Javascript Accordion -->
<script>
// Accordion Settings 
const accSettings = {
  speed: 300, // Animation speed
  oneOpen: true, // Close all other accordion items if true
  offsetAnchor: true, // Activate scroll to top for active item
  offsetFromTop: 180, // In pixels – Scroll to top at what distance
  scrollTopDelay: 400, // In Milliseconds – Delay before scroll to top 
  
  classes: {
  	accordion: 'js-accordion',
    header: 'js-accordion-header',
    item: 'js-accordion-item',
    body: 'js-accordion-body',
    icon: 'js-accordion-icon',
    active: 'active',
  }
};


const prefix = accSettings.classes

const accordion = (function(){
  const accordionElem = $(`.${prefix.accordion}`)
  const accordionHeader = accordionElem.find(`.${prefix.header}`)
  const accordionItem = $(`.${prefix.item}`)
  const accordionBody = $(`.${prefix.body}`)
  const accordionIcon = $(`.${prefix.icon}`)
  const activeClass = prefix.active
    
  return {
    // pass configurable object literal
    init: function(settings) {
      accordionHeader.on('click', function() {
        accordion.toggle($(this));
        if(accSettings.offsetAnchor) {
        	setTimeout(() => { 
        		$('html').animate({scrollTop: $(this).offset().top-accSettings.offsetFromTop}, accSettings.speed);
    			}, accSettings.scrollTopDelay);
        }
      });
      
      $.extend(accSettings, settings); 
      
      // ensure only one accordion is active if oneOpen is true
      if(settings.oneOpen && $(`.${prefix.item}.${activeClass}`).length > 1) {
        $(`.${prefix.item}.${activeClass}:not(:first)`).removeClass(activeClass).find(`.${prefix.header} > .${prefix.icon}`).removeClass(activeClass);
      }
      // reveal the active accordion bodies
      $(`.${prefix.item}.${activeClass}`).find(`> .${prefix.body}`).show();
      
    },
    
    toggle: function($this) {
      if(accSettings.oneOpen && $this[0] != $this.closest(accordionElem).find(`> .${prefix.item}.${activeClass} > .${prefix.header}`)[0]) {
        $this.closest(accordionElem).find(`> .${prefix.item}`).removeClass(activeClass).find(accordionBody).slideUp(accSettings.speed);
        $this.closest(accordionElem).find(`> .${prefix.item}`).find(`> .${prefix.header} > .${prefix.icon}`).removeClass(activeClass);
      }
      
      // show/hide the clicked accordion item
      $this.closest(accordionItem).toggleClass(`${activeClass}`).find(`> .${prefix.header} > .${prefix.icon}`).toggleClass(activeClass);
      $this.next().stop().slideToggle(accSettings.speed);
    }
  }
})();

$(document).ready(function(){
  accordion.init(accSettings);
});
</script>
Learn How to Use This
Datepicker
</ head> Code
<!-- DATE PICKER STYLES -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<style>
:root {
	/* Color Settings */
  --accent-color: #7262e6;							/* Controls BG Color for Selected Date */
  --secondary-accent-color: #9287e2;		/* Controls Text Color for Current Date */
	--main-bg-color: #1f2023;							/* Controls BG Color of the Calendar */
  --secondary-bg-color: #27292d;				/* Controls BG for Calendar Dates */
  --heading-color: #ffffff;							/* Controls Main Heading Color */
  --font-color: #c1c9d2;								/* Controls Main Font Color */
  --accent-top-text-color: #ffffff;			/* Controls Font Color on top of Accent Color */
  --disabled-font-color: #999999;				/* Controls Disabled Font Color */
  --shadow-color: 0 5px 15px -5px rgba(0,0,0,.5);
  
  /* Size & Spacing Settings */
  --border-radius: 4px;									/* Controls Large Border Radius (Calendar Itself) */
  --border-radius-sm: 2px;							/* Controls Small Border Radius (Calendar Dates) */
  --font-size: 16px;										/* Controls Font Size */
  --table-gap: 2px;											/* High number is not recommended */
  
  /* Arrow Icons */
  --left-arrow: url('https://assets-global.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dd958382e006f4eb2033_chevron-left.svg');
  --right-arrow: url('https://assets-global.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dbca268421b03c01abf6_chevron-right.svg');   
  --arrow-bg-color: transparent;
}



/* Picker Element Itself */
.pika-single {
  color: var(--heading-color);
  background: var(--main-bg-color);
  border: none !important;
  border-bottom-color: none !important;
  border-radius: var(--border-radius);
  font-family: inherit !important;
}

/* Datepicker Shadow */
.pika-single.is-bound {
  box-shadow: var(--shadow-color) !important;
}

/* Month & Year Displayed in Middle */
.pika-label {
  color: var(--heading-color);
  background-color: transparent !important;
}

.pika-prev, .is-rtl .pika-next {
	background-image: var(--left-arrow);
}
.pika-next, .is-rtl .pika-prev {
  background-image: var(--right-arrow);
}

/* This is the table element which includes the days labels and the days in the month */
.pika-table {
	border-spacing: var(--table-gap) !important;
  border-collapse: separate;
  font-size: var(--font-size) !important;
}

/* Days of the Week Labels */
.pika-table th {
  color: var(--font-color);
  text-align: center;
}

/* Days of the Week Underline - Example = underline dotted */
abbr[title] {
  text-decoration: none !important;
  cursor: default !important;
}

/* Month Days on Calendar - Default State */
.pika-button {
  color: var(--font-color);
  background: var(--secondary-bg-color);
  border-radius: var(--border-radius-sm);
  text-align: center;
  font-size: 12px !important;
}

/* Week Label */
.pika-week {
  color: var(--font-color);
}

/* Current Day Text/Number Color */
.is-today .pika-button {
  color: var(--secondary-accent-color) !important;
}

/* The Selected Date/Day */
.is-selected .pika-button {
  color: var(--accent-top-text-color) !Important;
  background: var(--accent-color);
  box-shadow: none !important;
}

/* Styles for any Disabled Dates/Days  */
.is-disabled .pika-button {
  color: var(--disabled-font-color);
  opacity: .3;
  background: transparent !important;
}

/* Styles for Date/Day Hover (can be same styles as "selected" styles) */
.pika-button:hover {
  color: var(--accent-top-text-color) !important;
  background: var(--accent-color) !important;
  border-radius: var(--border-radius-sm) !important;
}

/* Next & Prev Arrow Buttons */
.pika-prev, .pika-next {
	display: block;
	cursor: pointer;
	position: relative;
	outline: none;
	border: 0;
	padding: 0;
	width: 20px;
	height: 30px;
	text-indent: 20px;
	white-space: nowrap;
	overflow: hidden;
	background-color: var(--arrow-bg-color) !important;
	opacity: .5;
}
</style>
</ body> Code
<!-- DATE PICKER JS --> 
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<!-- FOR 'SINGLE' DATE PICKER ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
var picker = new Pikaday({ 
	field: document.getElementById('datepicker'),
	disableWeekends: true, // Disables option to select weekend days
	firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
	minDate: new Date(), // Disables option to select days prior to current day
  //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>





<!-- FOR 'MULTIPLE' DATE PICKERS ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
$('.date-picker').each(function() {  // ".date-picker" is the class name you would set on each field that needs a date picker.
    $(this).data('pikaday', new Pikaday({ 
      field: $(this)[0],
      disableWeekends: true, // Disables option to select weekend days
      firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
      minDate: new Date(), // Disables option to select days prior to current day
      //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
    }));
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>
Learn How to Use This
Clip Path - Slanted Edges
</ head> Code
<!-- SNIPPET NAME HERE -->
<style>
/* clip elements to specific shapes */
/* provide 4 values for each side in the order: top, right, bottom, left to create the polygon */
/* the calc() property is used to make calculations based on viewport  */
.cp-1{
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%); /* webkit browsers */
}

.cp-2{
	clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%); /* webkit browsers */
}

.cp-3{
	clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 90%); /* webkit browsers */
}

.cp-4{
	clip-path: polygon(0 0, 100% 0, 100% 90%, 25% 80%, 50% 100%, 5% 80%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 80%, 50% 100%, 25% 80%, 0 90%); /* webkit browsers */
}

.cp-btn {
	clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
  -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%); /* webkit browsers */
}

.cp-btn:hover {
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%); /* webkit browsers */
}
</style>
</ body> Code
Learn How to Use This
Floating Form Labels
</ head> Code
<!-- FORM STYLES --> 
<style>
.input-label {
	pointer-events: none;
}

.input::placeholder {
	opacity: 0;
  transition: opacity .2s ease-out;
}

.input:focus::placeholder {
	opacity: 1;
}
</style>
</ body> Code
<!-- FLOATING FORM LABELS -->
<script defer src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/floating-form-labels@0.1.1/index.min.js"></script>
<script>
window.CodeCrumbs.FloatLabels({
  inputSelector: ".input",
  labelActiveClass: "float",
})
</script>
Learn How to Use This
Find, Style & Replace Matching Strings
</ head> Code
</ body> Code
<!-- FIND, STYLE AND REPLACE MATCHING STRINGS --> 
<script>
const targetStrings = [
  {
  	selector: 'h2',
    targetString: 'String 1',
    replacementString: 'String 1 replacement',
    appendedClassName: 'class-name-here',
  },
  {
  	selector: 'p',
    targetString: 'String 2',
    replacementString: 'String 1 replacement',
    appendedClassName: 'class-name-here',
  },
]

function wrapAndReplaceMatches(selector, newClass, wordTarget, replacement) {
  const pattern = new RegExp(`\\b(${wordTarget})\\b`, 'gi');
  const hasClassAttr = newClass ? `class=${newClass}` : ''
  const wrapAndReplace = !replacement
  ? `<span ${hasClassAttr}>$1</span>`
  : `<span ${hasClassAttr}>${replacement}</span>`;
  Array.from(document.querySelectorAll(selector)).forEach((element) => {
		element.innerHTML = element.innerHTML.replace(pattern, wrapAndReplace);
	});
}

document.addEventListener('DOMContentLoaded', () => {
  targetStrings.forEach(({
  	selector,
    targetString,
    replacementString,
    appendedClassName
  }) => {
    wrapAndReplaceMatches(selector, appendedClassName, targetString, replacementString)
  })
});
</script>
Learn How to Use This
Swap All Values on Click
</ head> Code
</ body> Code
<!-- SWAP VALUES ON CLICK --> 
<script>
function setupSwitcher({
  /* Click Trigger Class */
  swapTrigger = "switcher",

  /* Essentials */
  swapText = "swap-text",
  swapDisplay = "swap-display",
  swapClass = "swap-class",
  swapUrl = "swap-url",

  /* Toggle and Add Attributes */
  swapToggleAttribute = "swap-toggle-attribute",
  swapAddAttribute = "swap-add-attribute",
  swapAddAttributeValue = "swap-add-attribute-value",

  /* Replace Attribute Value */
  swapAttributeTarget = "swap-attribute-target",
  swapTargetValue = "swap-target-value"

} = {}) {
  const swapAll = () => {
    // SWAP TEXT
    document.querySelectorAll(`[${swapText}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapText);
      const currentValue = swapDomElement.innerText;

      swapDomElement.innerText = nextValue;
      swapDomElement.setAttribute(swapText, currentValue);
    });

    // SWAP DISPLAY
    document.querySelectorAll(`[${swapDisplay}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapDisplay);
      const currentValue = swapDomElement.style.display;

      swapDomElement.style.display = nextValue;
      swapDomElement.setAttribute(swapDisplay, currentValue);
    });

    // SWAP CLASS
    document.querySelectorAll(`[${swapClass}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapClass);
      swapDomElement.classList.toggle(nextValue);
    });

    // SWAP URL
    document.querySelectorAll(`[${swapUrl}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapUrl);
      const currentValue = swapDomElement.href;

      swapDomElement.href = nextValue;
      swapDomElement.setAttribute(swapUrl, currentValue);
    });

    // TOGGLE ATTRIBUTE
    document.querySelectorAll(`[${swapToggleAttribute}]`).forEach((swapDomElement) => {
      const toggleAttribute = swapDomElement.getAttribute(
        swapToggleAttribute
      );
      swapDomElement.toggleAttribute(toggleAttribute);
    });

    // ADD ATTRIBUTE
    document.querySelectorAll(`[${swapAddAttribute}]`).forEach((swapDomElement) => {
      const newAttribute = swapDomElement.getAttribute(swapAddAttribute);
      const newAttributeValue = swapDomElement.getAttribute(
        swapAddAttributeValue
      );

      if (swapDomElement.hasAttribute(newAttribute)) {
        swapDomElement.removeAttribute(newAttribute);
      } else {
        swapDomElement.setAttribute(newAttribute, newAttributeValue);
      }
    });

    // REPLACE ATTRIBUTE VALUE
    document.querySelectorAll(`[${swapAttributeTarget}]`).forEach((swapDomElement) => {
      const attributeTarget = swapDomElement.getAttribute(
        swapAttributeTarget
      );
      let attributeValue = swapDomElement.getAttribute(attributeTarget);
      let newValue = swapDomElement.getAttribute(swapTargetValue);

      swapDomElement.setAttribute(attributeTarget, newValue);
      swapDomElement.setAttribute(swapTargetValue, attributeValue);
    });
  };

  document.querySelectorAll(`.${swapTrigger}`).forEach((switcherDomElement) => {
    switcherDomElement.addEventListener("click", swapAll);
  });
}

setupSwitcher();
</script>
Learn How to Use This
Date Picker
</ head> Code
</ body> Code
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@latest/index.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
})
</script>
Learn How to Use This
Ticker
</ head> Code
</ body> Code
<!-- CODECRUMBS TICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/ticker@0.1.5/index.min.js"></script>
<script>
window.CodeCrumbs.Ticker({
	tickerSelector: ".cc-ticker"
})
</script>
Learn How to Use This
Built by
Built with
For the best experience

Please switch to desktop to view the content.

Back Home