Ivan's fun Bag hoodsly generic toggle

by iscrow

HTML

<div class="home-video-faq">
  <div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true">
    <div>
      <div>
        <ul>
          <li><a id="faq_toggle1" href="#" data-vid="788300081">Introduction</a></li>
          <li><a id="faq_toggle2" href="#" data-vid="788302015">Lead Times</a></li>
          <li><a id="faq_toggle3" href="#" data-vid="790468950">What Our Hoods Are Made Out Of</a></li>
          <li><a href="#" data-vid="790469269">Measuring For Your Hood</a></li>
          <li><a href="#" data-vid="790466783">Using Your Own Insert</a></li>
          <li><a href="#" data-vid="790467695">Custom Heights</a></li>
          <li><a href="#" data-vid="788341609">Custom Paint Matches</a></li>
          <li><a href="#" data-vid="790468422">Missed Installation Date Fees</a></li>
          <li><a href="#" data-vid="790468031">Hood Replacement Process</a></li>
          <li><a href="#" data-vid="792021721">Trim Options</a></li>
        </ul>
      </div>
    </div>

    <div id="content_faq_toggle1" class="faq_content hide">
      <iframe src="https://player.vimeo.com/video/788300081?autoplay=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>
    </div>
    <div id="content_faq_toggle2" class="faq_content hide">
      <iframe src="https://player.vimeo.com/video/788302015?autoplay=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>
    </div>
    <div id="content_faq_toggle3" class="faq_content hide">
      <iframe src="https://player.vimeo.com/video/790468950?autoplay=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>
    </div>
  </div>
</div>

CSS

.hide {
    display: none;
}

.ifb-active {
    color: red;
}
.SomeToggleClass, .SomeOtherToggleClass {
    width: 50%;
    float: left;
}

.SomeToggleClass {
    background-color: green;
}

.SomeOtherToggleClass {
    background-color: red;
}

.toggle3, .SomeInsideToggleClass {
    background-color: blue;
}

.SomeScrollTarget {
    background-color: pink;
}

JavaScript

/*
 * Ivan's Fun Bag (...as in a bag of fun)
 *
 * Authored by Ivan Ivanov
 *
 * Copyright 2014, Ivan Ivanov
 * License: GNU General Public License, version 3 (GPL-3.0)
 * http://www.opensource.org/licenses/gpl-3.0.html
 *
 * Revision: 2015-03-23
 */

;(function($) {

    "use strict";
    
    $.fn.ifbToggle = function (target, options) {
        var settings = $.extend({
            // These are the defaults.
            toggleTarget: target,                   // The target element to scroll to
            ToggleSpeed: "slow",                    // The speed with which to toggle the element (slow/fast/number in ms). slow=600ms, fast=200ms
            ToggleType: "vertical",                 // Type of toggle. Vertical is open: Down, close: Up, Anything else is Open: Slide down and to the right, Close: Slide up and to the left
            ToggleEasing: "swing",                  // Toggle easing. swing, linear or if jQueryUI/other jQuery easing library is included any of the easing function supported there.
            OtherElementsToHide: $(''),             // What other elements should we hide when closing this toggle?
            OtherTogglesToMarkInactive: $(''),      // What other elements' toggles to mark inactive when closing this toggle?
            ElementsToHideBeforeShowingThis: $(''), // What elements to hide before opening this toggle?
            AutoHideSpeed: "fast",                  // If we hide other elements on Open/Close what speed should we use?
            ScrollToElement: $(''),                 // What element do we scroll to on open? Takes a $("some element").
            ScrollToSpeed: "slow",                  // If we scroll, what speed should we use?
            ScrollToDelay: "fast",                  // If we scroll, how long shold we wait before we do it? For example for other elements to rearrange on the page so we scroll to an acurate location.
            ScrollToOffsetTop: 0,                   // If we scroll to an element, should...