JSFiddle - React, Tailwind, and code Playground

Reports Page

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
    <div class="onerow">
        <div class="col12">
            <div class="content">
                <div class="accountingReports">
                     <h4>Accounting Reports</h4>

                    <div id="tabsPayments_wrapper">
                        <div id="tabsPayments_container">
                            <ul id="tabsPayments">
                                <li class="active"><a href="#tab1">Payments from All Tenants</a>
                                </li>
                                <li><a href="#tab2">Payments from a Specified Tenant</a>
                                </li>
                                <li><a href="#tab3">Refunds Issued</a>
                                </li>
                            </ul>
                        </div>
                        <div id="tabsPayments_content_container">
                            <div id="tab1" class="tabPayments_content" style="display: block;">
                                <form action="index.php?action=paymentsExport" method="post" id="resideForm">
                                    <p>
                                        <label for="otherFees"><small>Include Fees</small><span class="alignright">Select if you want Other Fees (Deposits, Application Fees etc.) included on the Report</span>
                                        </label>
                                        <br>
                                        <select name="otherFees" id="otherFees" class="text-input span4">
                                            <option value="0">No, do not Include - Just show me the Rent Received</option>
                                            <option value="1">Yes, Include all other Fees and the Rent Received</option>
                                        </select>
                                    </p>
                                    <p>
                   ...

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway);

/* ==========================================
	Report Page Tabs
   ========================================== */
 #tabsPayments, #tabsService, #tabsTenant, #tabsProperties {
    list-style: none;
    padding: 8px 0 6px;
    margin: 0 0 0 10px;
    font-size: 16px;
}
#tabsPayments li, #tabsService li, #tabsTenant li, #tabsProperties li {
    display: inline;
}
#tabsPayments li a, #tabsService li a, #tabsTenant li a, #tabsProperties li a {
    border: 1px solid #dcdcdc;
    padding: 4px 6px;
    text-decoration: none;
    background-color: #eeeeee;
    border-bottom: none;
    outline: none;
    font-weight: bold;
    font-size: 13px;
}
#tabsPayments li a:hover, #tabsService li a:hover, #tabsTenant li a:hover, #tabsProperties li a:hover {
    background-color: #dddddd;
    padding: 4px 6px;
}
#tabsPayments li.active a, #tabsService li.active a, #tabsTenant li.active a, #tabsProperties li.active a {
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
#tabsPayments li.active a:hover, #tabsService li.active a:hover, #tabsTenant li.active a:hover, #tabsProperties li.active a:hover {
    background-color: #eeeeee;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
#tabsPayments_content_container, #tabsService_content_container, #tabsTenant_content_container, #tabsProperties_content_container {
    padding: 0 10px;
    border-top: 1px solid #ccc;
}
.tabPayments_content, .tabService_content, .tabTenant_content, .tabProperties_content {
    display: none;
}

JavaScript

$(document).ready(function () {
    /** ******************************
     * Tabs
     ****************************** **/
    $("#tabsPayments li").click(function () {
        $("#tabsPayments li").removeClass('active');
        $(this).addClass("active");
        $(".tabPayments_content").hide();
        var selected_tab = $(this).find("a").attr("href");
        $(selected_tab).fadeIn();
        return false;
    });

    $("#tabsService li").click(function () {
        $("#tabsService li").removeClass('active');
        $(this).addClass("active");
        $(".tabService_content").hide();
        var selected_tab = $(this).find("a").attr("href");
        $(selected_tab).fadeIn();
        return false;
    });

    $("#tabsTenant li").click(function () {
        $("#tabsTenant li").removeClass('active');
        $(this).addClass("active");
        $(".tabTenant_content").hide();
        var selected_tab = $(this).find("a").attr("href");
        $(selected_tab).fadeIn();
        return false;
    });

    $("#tabsProperties li").click(function () {
        $("#tabsProperties li").removeClass('active');
        $(this).addClass("active");
        $(".tabProperties_content").hide();
        var selected_tab = $(this).find("a").attr("href");
        $(selected_tab).fadeIn();
        return false;
    });


});