Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="cm-choose">
	<div class="tux-accordionCards">
		<div class="tux-accordion-card expanded">
			<header class="tux-accordion-card-title">
				<span class="icon"><i class="icon-arrow-down"></i></span> Header 1
			</header>
			<section class="tux-accordion-card-content">
	    	<h2>first Slide</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur
					adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam
					error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at
					amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur
					adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam
					error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at
					amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum.</p> 
			</section>
		</div>
		<div class="tux-accordion-card">
			<header class="tux-accordion-card-title">
				<span class="icon"><i class="icon-arrow-down"></i></span>Header 2
			</header>
			<section class="tux-accordion-card-content">
				   	<h2>second Slide</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur
					adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam
					error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at
					amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur
					adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam
					error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at
					amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum.</p> 

			</section>
		</div>
		<div class="tux-accordion-card">
			<header class="tux-accordion-card-title">
				<span class="icon"><i class="icon-arrow-down"></i></span>Header 3
			</header>
			<section class="tux-accordion-card-content">
				<h2>third Slide</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur
					adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam
					error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at
					amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur
					adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam
					error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at
					amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum.</p>
			</section>
		</div>
		<div class="tux-accordion-card">
			<header class="tux-accordion-card-title">
				<span class="icon"><i class="icon-arrow-down"></i></span>Header 4
			</header>
			<section class="tux-accordion-card-content">
				<h2>fourth Slide</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur
					adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam
					error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at
					amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur
					adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam
					error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at
					amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum.</p>
			</section>
		</div>
			<div class="tux-accordion-card">
			<header class="tux-accordion-card-title">
				<span class="icon"><i class="icon-arrow-down"></i></span>Header 5
			</header>
			<section class="tux-accordion-card-content">
				<h2>Fifth Slide</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur
					adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam
					error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at
					amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur
					adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam
					error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at
					amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum.</p>
			</section>
		</div>
	</div>

</div>
<!--Commeting out 2nd instance for presentation purposes-->
<!-- <div id="cm-complete">
	<div class="tux-accordionCards">
		<div class="tux-accordion-card expanded">
			<header class="tux-accordion-card-title">
				<span class="icon"><i class="icon-arrow-down"></i></span> Section 2 - Header 1
			</header>
			<section class="tux-accordion-card-content">
				<h2>first Slide</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur
					adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam
					error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at
					amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur
					adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam
					error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at
					amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum.</p>
			</section>
		</div>
		<div class="tux-accordion-card">
			<header class="tux-accordion-card-title">
				<span class="icon"><i class="icon-arrow-down"></i></span> Section 2 - Header 2
			</header>
			<section class="tux-accordion-card-content">
				<h2>Second Slide</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur
					adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam
					error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at
					amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur
					adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam
					error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at
					amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum.</p>
			</section>
		</div>
		<div class="tux-accordion-card">
			<header class="tux-accordion-card-title">
				<span class="icon"><i class="icon-arrow-down"></i></span> Section 2 - Header 3
			</header>
			<section class="tux-accordion-card-content">
				<h2>third Slide</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur
					adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam
					error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at
					amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur
					adipisicing elit. Aut laboriosam error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam
					error, alias dolores inventore at amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam error, alias dolores inventore at
					amet, nobis dolore, temporibus magnam hic. Eligendi in asperiores quaerat harum, magnam eos nostrum earum.</p>
			</section>
		</div>
	</div>
</div> -->
              
            
!

CSS

              
                /*--------------------------------------------
    Choose.less
---------------------------------------------*/
$primary-font: NexaRegular;
//COLOR BASE

//color definitions
$lightBlue     : #35ABE3;
$green         : #539B44;
$black         : #282828;
$white-3       : #f7f7f7;
$white-2       : #E8E8E8;//!
$white-1       : #F9F9FB;//!
$white         : #ffffff;
 
 
$nevada        : #676C7A;

//in use
$grey-dark2    : #4f5b5b;//*
$grey-dark     : #363636;//*
$grey          : #4A4A4A;//*
$grey-light    : #999999;//!
$grey-light-2  : #b5b5b5;//!
$grey-light-3  : #E8E8E8;//!
$purple        : #652160;//*

$teal          : #44c6a1;//*
$teal-light    : #b7eada;//*
$dark-teal     : #708383;//*
$primary-rgba  : rgba(79,91,91,1);

//COLOR DEFINITIONS ABSTRACTED
$tux-color-dark-primary: $grey-dark2;//!
$tux-color-dark-secondary: $grey;//!
$tux-color-dark-tertiary: $grey-dark;
$tux-color-light-primary: $grey-light;
$tux-color-light-secondary: $grey-light-2;//!
$tux-color-light-tertiary: $grey-light-3;//!
$tux-color-accent: $dark-teal;//!
$tux-color-accent-alt: $teal;//!
$tux-color-accent-tert: $teal-light;//!
$tux-color-accent-quat: $lightBlue;//!
$tux-color-white: $white;//*

body{
	margin: 0;
	font-family: $primary-font, helvetica, sans-serif;
	background-color: #ddd;
	* {
		user-select: none;
	}
}


#cm-choose, #cm-complete{
	height: 100%;
}

$viewbar-height: 58px;
$searchbar-height: 40px;
$scrollbar-width: 8;
$workspace-width: 1024px;

// begin accordion
.tux-accordionCards {
  position:relative;
     height: 100%;
  overflow: hidden;
  width: 100%;
	  background-color: $white-1;
}
.tux-accordion-card{
  position: absolute;
  top: 0;
  width: 100%;
}

.tux-accordion-card-title{
  background-color: $tux-color-light-secondary;
	user-select: none;
	cursor: grabbing;
  text-align:left;
  padding: 0.3rem 2em 0rem;
  display:block;
  text-decoration:none;
  color: $tux-color-white;
  transition:background-color 0.5s ease-in-out;
  border-bottom:1px solid $tux-color-white;
  font-size: 1em;
  text-transform: uppercase;
 	font-family: $primary-font, helvetica, sans-serif;
  line-height: 1.7em;
  width: 100%;
  span.icon{
    font-size: 1.1em;
    position:relative;
    top: 0;
    right: 10px;
    transform: rotate(270deg);
    height: 1.3rem;
    width: 1.3rem;
    float:left;
    background-color: $tux-color-accent-alt;
    border-radius: 50%;
    transition: transform 0.3s ease-in-out;
    i{
			color: white;
      position: absolute;
      font-size: 2em;
      top: -4px;
      line-height: 0.9em;
      padding-left: 0;
      width: 100%;
      height: 100%;
      right: 7px;
    }
  }
}
.tux-accordion-card-title {
  background-color: grey;
	user-select: none;
  span.icon {
    transform: rotate( 270deg);
  }
}
.expanded{
  .tux-accordion-card-title {
    background-color:$tux-color-accent;
  }
  span.icon{
    transform: rotate( -0deg);
  }
}
.icon-arrow-down  {
	transform-origin: center;
		float: right;
			position: relative;
			top: 50%;
			transform: rotate(0deg) translateY(-50%);
			font-size: 2.5rem;
 			
			transition: transform 0.25s;
	&:before {
	 
		content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+CiAgPHBhdGggZmlsbD0iI2ZmZmZmZiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNMTQuNzMgMTAuMDQ2bC05LjQwMSA5LjRMNCAxOC4xMThsOC4zOTUtOC4zOTVMNCAxLjMzIDUuMzI5IDBsOS43MjQgOS43MjQtLjMyNC4zMjJ6Ii8+Cjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-position-y: 0%;
    background-position-x: 0%;
		background-size: .1em;
    width: .5em;
		max-width: .2em;
    height: .5em;
    top: 0.385em;
    left: 0.525em;
		transform: scale(.6) rotate(90deg);
    position: absolute;
	}
}
 
.tux-accordion-card-content {
  height: 100%;
  overflow-y:scroll;
  padding: 1.4rem;
	background-color: $white-1;
	h2 {
		text-transform: capitalize;
	}
}

 
 

              
            
!

JS

              
                var TuxCardAccordion = function(wrapper) {
    //forces instantiation to be a new instance of the constructor
    if (!(this instanceof TuxCardAccordion)) {
        return new TuxCardAccordion(wrapper);
    }
    var cardContainer, card, activeIndex, cardCount, cardHeader, cardContainerHeight, cardOrder, cardReverseOrder, cardReverseOffset, draggableCards, headerHeight, cardLayout, slideOffsetCalculate, companions, startY, updateActiveIndex, lastIndex, firstClickCheck;

    //elements
    cardContainer = $(wrapper).find(".tux-accordionCards");
    card = document.querySelectorAll(wrapper + " .tux-accordion-card");
    cardHeader = $(wrapper).find(".tux-accordion-card-title");
    //define heights
    cardContainerHeight = function() {
        //for project
         //return cardContentHeight = $(window).height() - $(".header").outerHeight();

        // for codepen
         return $(window).height();
    };

    cardCount = card.length;
    $(wrapper).find(".tux-accordionCards").height(cardContainerHeight());
    headerHeight = 0 || $(".tux-accordion-card-title").outerHeight();

    //determines slide offsets
    cardOrder = [];
    cardReverseOrder = [];
    draggableCards = [];

    //slideOffsetCalculate needs to be called here so cardReverseOrder can have the right calculations
    slideOffsetCalculate = function() {
        $(wrapper + " .tux-accordion-card").map(function(i) {
            var offHeightCalculated = headerHeight * i;
            cardOrder.push(offHeightCalculated);
        });
    }();

    cardReverseOrder = cardOrder.slice(0); //neccesary to create new instance of cardOrder array in reverse
    cardReverseOrder = cardReverseOrder.reverse(); //stores full height reverse offset when screen is resized
    cardReverseOffset = cardReverseOrder.slice(0); // used to store inital reverse offset
    companions = [];

    //adds TweenMax (obviously :p )
    cardLayout = TweenMax;
    cardLayout.set(wrapper + " .tux-accordion-card");

    //fires when card snaps into position.
    function onThrowComplete() {
        // checking for current open slide and applying to correct index.
        this.updated = activeIndex;
        var i;
        for (i = 0; i < cardCount; i++) {
            draggableCards[i][0].enable();
            if (this.endY == cardOrder[i]) {
                this.updated = i;
            } else if (this.endY == cardReverseOffset[i-1]){
                this.updated = i-1;
            }
        }
        updateActiveIndex(this.updated);
    }

    //helps reposition elements if they get out of sync.
    function cardPositionHelper() {
        var i;
        for (i = 0; i < cardCount; i++) {
            draggableCards[i][0].enable();
            if (i <= activeIndex) {
                //compares the current postion to see if it's in the right spot before active index
                if ($(card[i])[0]._gsTransform.y != cardOrder[i]) {
                    cardLayout.to(card[i], .7, {
                        y: cardOrder[i],
                        ease: Power2.easeOut,
                        onComplete: function() {}
                    });
                }
            } else if (i > activeIndex) {
                cardLayout.to(card[i], .7, {
                    y: (cardContainerHeight() - cardReverseOrder[i - 1]),
                    ease: Power2.easeOut,
                    onComplete: function() {}
                });
            }
        }
    }

    //used to update titles and make sure all the cards are in the right place.
    function updateActiveIndex(updatedIndex) {
        // setting lastIndex and activeIndex's
        lastIndex = activeIndex;
        activeIndex = (updatedIndex || updatedIndex === 0) ? updatedIndex : activeIndex;

        $(wrapper + " .tux-accordion-card").removeClass('expanded');
        $(card[activeIndex]).addClass('expanded');
        // this forces sections to be in the correct location if they lost their place
        cardPositionHelper();
    }

    // updateCompanions is used to move the appropriate sibblings when grabbed
    function updateCompanions() {
        var i = companions.length,
            deltaY = this.y - startY,
            companion;
        while (--i > -1) {
            companion = companions[i];
            cardLayout.set(companion.element, {
                y: companion.y + deltaY
            });
        }
    }
    //end of companionGrabber

    //flag for click click behavior;
    firstClickCheck = true;
    //sets up draggable on the various cards
    function draggableInit() {
        $(wrapper + " .tux-accordion-card").map(function(i) {
            draggableCards[i] = Draggable.create(card[i], {
                snap: {
                    y: [cardOrder[i], (cardContainerHeight() - cardReverseOrder[i - 1])],
                },
                trigger: ".card-" + i,
                zIndexBoost: false,
                minimumMovement: 6,
                throwProps: true,
                type: "y",
                edgeResistance: 1,
                dragResistance: 0.25,
                dragClickables:true,
                onThrowComplete: onThrowComplete,
                onThrowUpdate: updateCompanions,
                onDrag: updateCompanions,
                maxDuration: 3,

                onPress: function() {
                    var cards = document.querySelectorAll(wrapper + " .tux-accordion-card");
                    var currentIndex = this.cardIndex;
                    i = cardCount;
                    companions = [];
                    startY = this.y;
                    while (--i > -1) {
                        if (cards[i] !== this.target) {
                            draggableCards[i][0].disable();
                            if ((currentIndex > activeIndex) && (i != 0)) { // checks to see if selection is below the active card
                                if ((i < currentIndex) && (i > activeIndex)) { // makes sure we only select the ones we want to move
                                    companions.push({
                                        element: cards[i],
                                        y: cards[i]._gsTransform.y
                                    });
                                }
                            }
                            if ((currentIndex < activeIndex) && (currentIndex != 0)) { // checks to see if selection is above the active card
                                if ((i > currentIndex) && (i <= activeIndex)) { // makes sure we only select the ones we want to move
                                    companions.push({
                                        element: cards[i],
                                        y: cards[i]._gsTransform.y
                                    });
                                }
                            }
                        }
                    }
                    TweenLite.killTweensOf(".cards");
                },
                onRelease: function(e) {
									  		e.preventDefault();
                        e.stopPropagation();
                    if ($(".tux-accordion-card-content").hasClass("locked") || this.isThrowing) {
                      
                        return;
                    }
                    //making sure we have an index defined
                    var target = this.cardIndex;
                    //checking to see if we are clicking the same selection and if so then toggle to previous selection.
                    if (target === activeIndex) {
                        //checking to make sure we have somewhere to navigate to if it's our first click
                        if (firstClickCheck === true) {
                            if (target < (cardCount - 1)) {
                                updateActiveIndex(activeIndex + 1);
                            } else {
                                updateActiveIndex(activeIndex - 1);
                            }
                        } else {
                            updateActiveIndex(lastIndex);
                        }
                    } else {
                        updateActiveIndex(target);
                    }
                    cardPositionHelper();
                    // disabling firstClick logic
                    firstClickCheck = false;
                }
            });
            //sets the initial cardIndex on each section element
            draggableCards[i][0].cardIndex = i;
        });
        draggableCards[0][0].vars.bounds = cardContainer;

    }
    //end of draggableInit
 
    // refreshLayout updates offesets if container is resized.
    function refreshLayout() {
        $(wrapper + " .tux-accordion-card").map(function(i) {
            //lines up from the top
            if (i <= activeIndex) {
                cardLayout.set(card[i], {
                    y: cardOrder[i]
                })
            } else {
                //lines up from the bottom
                cardLayout.set(card[i], {
                    y: (cardContainerHeight() - cardReverseOrder[i - 1])
                });
            }
            //updates full height reverse offsets for cardReverseOffset array
            var fullOffset = cardContainerHeight() - cardReverseOrder[i];
            cardReverseOffset.splice(i, 0, fullOffset);
            cardReverseOffset.pop();
            draggableCards[i][0].vars.snap = {
                y: [cardOrder[i], cardReverseOffset[i - 1]]
            }
        });
    };
    //end of refreshLayout

    function init() {
        //lets us define the inital active index on load
        if (typeof activeIndex === 'undefined') {
            activeIndex = $(wrapper).find('.tux-accordion-card.expanded').index();
        }
        $(card).map(function(i) {
            //adds classes to each card

            $(card[i]).find(".tux-accordion-card-title").addClass("card-" + i);
        });
        draggableInit();
        refreshLayout();
    };
    //end of init

    //updates heights of container
    $(window).resize(function(e) {
        $(wrapper).find(".tux-accordionCards").height(cardContainerHeight());
        refreshLayout();
        updateActiveIndex();
    });

    if (cardCount < 1) {
        return null;
    } else {
        init();
        return {
            tuxAccordionCards: draggableCards,
            updateCardIndex: updateActiveIndex
        };
    }
};
// end tuxCardAccordion
 var chooseAccordion = new TuxCardAccordion("#cm-choose");
//var completeAccordion = new TuxCardAccordion("#cm-complete");
              
            
!
999px

Console