JSFiddle - React, Tailwind, and code Playground

by raskalbass

HTML

<script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
<link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css">
<div id="hotspots">
     <h1>Hot Spots <span ><a href="#" class="toggle-button" >toggle</a></span></h1>

    <section class="dropdown-area">
        <div class="flex-container">
            <div class="flexslider" id="secondary-slider">
                <ul class="slides">
                    <li>
                        <img src="http://placehold.it/350x150">
                    </li>
                    <li>
                        <img src="http://placehold.it/300x150">
                    </li>
                </ul>
            </div>
            <!--End Flexslider-->
        </div>
        <!--End Flex-container-->
    </section>
</div>

CSS

.dropdown-area {
    width: 100%;
    float: left;
    display: none;
}

JavaScript

var fs_init = 0;
$("#hotspots .toggle-button").click(function () {
    $("#hotspots .dropdown-area").slideToggle("slow");
    $("#hotspots span").toggleClass("toggle-button close");
    if (fs_init == 0) {
    $('.flexslider').flexslider({
        animation: "slide"
    });
    fs_init++;
    }
});