JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<script src="http://theconfluencegroup.com/new_site5/jquery.zoomooz.js"></script>
<div id="container" class="zoomTarget">
<a href="#" data-toggle="#div1" class=" link">link 1</a>

<a href="#" data-toggle="#div2"
    class=" link">link 2</a>

<a href="#" data-toggle="#div3" class=" link">link 3</a>

    <a
    href="#" data-toggle="#div4" class=" link">link 4</a>
        <div id="info">
            <ul id="div1">div 1</ul>
            <ul id="div2">div 2</ul>
            <ul id="div3">div 3</ul>
            <ul id="div4">div 4</ul>
        </div>
</div>

CSS

ul {
    display: none;
    float:right;
}
.link {

}
#info {
    width:200px;
    height:200px;
}
#container {
    width:200px;
    height:200px;
}

JavaScript

$("a[data-toggle]").on("click", function (e) {
    e.preventDefault(); // prevent navigating
    var selector = $(this).data("toggle"); // get corresponding element
    $("ul").hide();
    $(selector).fadeIn(1000);
    $(selector).zoomTo({
        targetsize: 0.25,
        duration: 100
    });
});