JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<script src="http://theconfluencegroup.com/new_site5/jquery.zoomooz.js"></script>
<a href="#" data-toggle="#div1" class="zoomTarget link">link 1</a>
<a href="#" data-toggle="#div2" class="zoomTarget link">link 2</a>
<a href="#" data-toggle="#div3" class="zoomTarget link">link 3</a>

        <div id="div1">div 1</div>
        <div id="div2">div 2</div>
        <div id="div3">div 3</div>

CSS

div:not(#div1) {
    display: none;
    float:right;
}
.link1 {
    float:left;
}
.link2 {
    float:left;
}
.link3 {
    float:left;
}

JavaScript

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

});