JSFiddle - React, Tailwind, and code Playground

by Abra Cadabra

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<div id="content">
    <ul>
        <li> <a href="#">
                President of India
            </a>

        </li>
        <li> <a href="#">
                President of Russia
            </a>

        </li>
        <li> <a href="#">
                President of Romania
            </a>

        </li>
        <li> <a href="#">
                President of Belarus
            </a>

        </li>
    </ul>
</div>

CSS

div {
    font-family:"proxima-nova", sans-serif;
}
ul {
    list-style: none;
}
li {
    background-color: #0e90d2;
    border: 3px solid rgb(250, 210, 50);
    margin-bottom: 4px;
    height: 50px;
    text-align: center;
    line-height: 50px;
}
a {
    display: block;
    text-decoration: none;
    color: white;
}

JavaScript

// Extend jQuery.fn with our new method
jQuery.extend(jQuery.fn, {
    renderPresidentPage: function () {
        $(this).slideUp(300);
    }
});

$(document).ready(function () {
    $("#content").on('click', 'a', function (e) {
        e.preventDefault();
        $(e.delegateTarget).renderPresidentPage();
    });
});