JSFiddle - React, Tailwind, and code Playground

by Julian

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<a href="#modal" class="fancybox">Click me</a>

<div id="modal" style="display: none;" class="submenu-content-wrapper">
<div>
    <div class="accordionButton"><i class="icon"></i><h1>Click me</h1></div>
    <div class="accordionContent">
        hello word
    </div>
    <div class="accordionButton"><i class="icon"></i><h1>Click me</h1></div>
    <div class="accordionContent">
        hello word
    </div>
    <div class="accordionButton"><i class="icon"></i><h1>Click me</h1></div>
    <div class="accordionContent">
        hello word
    </div>
    <div class="accordionButton"><i class="icon"></i><h1>Click me</h1></div>
    <div class="accordionContent">
        hello word
    </div>
    <div class="accordionButton"><i class="icon"></i><h1>Click me</h1></div>
    <div class="accordionContent">
        hello word
    </div>
</div>
</div>

CSS

.accordionButton {
    background: -moz-linear-gradient(center top , #FDFDFD 0%, #EEEEEE 100%) repeat scroll 0 0 transparent;
    border: 1px solid #CCCCCC;
    color: #444444;
    cursor: pointer;
    font-weight: bold;
    padding: 3px 5px;
    text-shadow: 0 1px 1px #F6F6F6;
}


.accordionContent {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 0 1px;
    color: #333333;
    display: none;
    padding: 3px 5px;
    text-shadow: 0 1px 0 #FFFFFF;
}

JavaScript

$(".fancybox").fancybox({
    openEffect : 'elastic',
    openSpeed  : 150,
    closeEffect : 'elastic',
    closeSpeed  : 150,
    autoDimensions: true,
    height: 'auto',
    afterShow: function(){
        $.fancybox.update()
    }
});

$('.accordionButton').click(function() {
    $('.accordionButton').removeClass('accordionButton-open');
    $('.accordionContent').slideUp('fast');
    if($(this).next().is(':hidden') == true) {
        $(this).addClass('accordionButton-open');
        $(this).next().slideDown('fast');
    }
});