Special Accordion

Built for a client's specific needs.

by Pete Fecteau

HTML

<div class="feature">
    <div id="btnControl">
        <div id="photoconPrev" class="prevBtn"></div>
        <div id="photoconNext" class="nextBtn"></div>
    </div>
    <div class='instructions'>
        <div class="pageWrap">
            <div class='page'>
                <h2>Page One</h2>
                <div class="contents">
                    <img src="http://i.imgur.com/bHNbnk0.jpg" />
                </div>
            </div>
            <div class='page'>
                <h2>Page Two</h2>
                <div class="contents">
                    <img src="http://i.imgur.com/Pvp5OGU.jpg" />
                </div>
            </div>
        </div>
        <div class='instructionToggle close clearfix'></div>
    </div>
</div>

CSS

html, body {margin:0;padding:0;font-family:'Helvetica', Arial, san-serif;color:#333;}
.feature #btnControl .prevBtn,
.feature #btnControl .nextBtn {
    position:absolute;
    top:20px;
    cursor:pointer;
    opacity:0.6;
    z-index: 1000;
}
.feature #btnControl .prevBtn:hover,
.feature #btnControl .nextBtn:hover {opacity:1;}
.feature #btnControl .prevBtn {
    left:10px;
    display:none;
    border:10px solid transparent;
    border-right-color:#333;
    width:0;
    height:0;
}
.feature #btnControl .nextBtn {
    right:10px;
    border:10px solid transparent;
    border-left-color:#333;
}
.feature .instructions {
    float:left;
    overflow:visible;
    height:100%;
}
.feature .instructions .pageWrap {
    width:1000%;
    height:100%;
    overflow:visible;
}
.feature .instructions .pageWrap .page {
    width:10%;
    height:100%;
    float:left;
    overflow:hidden;
}
.feature .instructions .pageWrap .page h2 {text-align:center;}
.feature .instructions .pageWrap .page .contents {
    height:0px;
}
.feature .instructions .pageWrap .page .contents img {display:block;margin:0 auto;}
.instructionToggle.close,
.instructionToggle.open {
    border:10px solid transparent;
    border-top-color:#333;
    width:0;
    height:0;
    margin-left:-10px;
    position:relative;
    bottom:0px;
    left:50%;
    cursor:pointer;
    opacity:0.6;
}
.instructionToggle.close:hover,
.instructionToggle.open:hover {opacity:1;}
.instructionToggle.open {
    border:10px solid transparent;
    border-bottom-color:#333;
}
.clearfix {clear:both;}

JavaScript

function simpleAccordion() {
    function pageToggle($element) {
        var $feature = $element.closest('.feature'),
            $pageContent = $feature.find('.page .contents'),
            $pageToggler = $feature.find('.instructionToggle');
        if ($pageToggler.hasClass('close')) {
            $pageContent.animate({height: 520}, 400, "swing");
            $pageToggler.addClass('open');
            $pageToggler.removeClass('close');
        } else {
            $pageContent.animate({height: 0}, 400, "swing");
            $pageToggler.addClass('close');
            $pageToggler.removeClass('open');
        }
    }
    $('.instructionToggle').on('click', function(e) {
      pageToggle($(this));
    });
}

function simpleSlider() {
    function moveNext($element) {
        var $feature = $element.closest('.feature'),
            $pageWrap = $feature.find('.instructions .pageWrap'),
            $prevBtn = $feature.find('.prevBtn');
        $pageWrap.animate({marginLeft: '-100%'}, 400, "swing");
        $element.hide();
        $prevBtn.show();
    }
    function movePrev($element) {
        var $feature = $element.closest('.feature'),
            $pageWrap = $feature.find('.instructions .pageWrap'),
            $nextBtn = $feature.find('.nextBtn');
        $pageWrap.animate({marginLeft: '0%'}, 400, "swing");
        $element.hide();
        $nextBtn.show();
    }
    $('.nextBtn').on('click', function(e) {
      moveNext($(this));
    });
    $('.prevBtn').on('click', function(e) {
      movePrev($(this));
    });
}
simpleAccordion();
simpleSlider();