JSFiddle - React, Tailwind, and code Playground

by tridip

HTML

<div id="MainSlideDIV">
        
        <div class="UPS_label" id="dvUPS_label">
            <div>
                <ul>
                    <li><span id="lblServiceTitle">Service</span></li>
                </ul>
                <ul>
                    <li><span id="lblCostTitle">Cost</span>
                        <br>
                    </li>
                </ul>
            </div>
            <div id="rec">
                <ul>
                    <li>
                        <input type="hidden" value="054" id="hdnServiceCode">
                        <span id="srvname">UPS Express Plus</span></li>
                </ul>
                <ul>
                    <li>74.89&nbsp;GBP</li>
                    <li class="nobutton"><span id="rptPrice_ctl00_btnShipNow">Ship Now</span> </li>
                </ul>
            </div>
            <div id="rec">
                <ul>
                    <li>
                        <input type="hidden" value="007" id="hdnServiceCode">
                        <span id="srvname">UPS Express</span></li>
                </ul>
                <ul>
                    <li>18.4&nbsp;GBP</li>
                    <li class="nobutton"><span id="rptPrice_ctl01_btnShipNow">Ship Now</span> </li>
                </ul>
            </div>
            <div id="rec">
                <ul>
                    <li>
                        <input type="hidden" value="065" id="hdnServiceCode">
                        <span id="srvname">UPS Express Saver</span></li>
                </ul>
                <ul>
                    <li>17.87&nbsp;GBP</li>
                    <li class="nobutton"><span id="rptPrice_ctl02_btnShipNow">Ship Now</span> </li>
                </ul>
            </div>
            <div id="rec">
                <ul>
                    <li>
                        <input type="hidden" value="011" id="hdnServiceCode">
                        <span id="srvname">UPS Standard</span></li>
                </ul>
               ...

CSS

/* TNT Style Start*/
        .UPS_rate_time
        {
            border: thin solid black;
            width: 400px;
            height: auto!;
            min-height: 360px;
            overflow: hidden;
            position: absolute; /* new */
            float: left;
        }
        
        .information
        {
            background: #3ab54b;
            width: 384px;
            /*padding: 20px;*/
            color:White;
            font-weight:bold;
            font-size:20px;
            margin-left:3px;
            height:30px; 
            margin-top:5px;
            padding: 5px;
        }
        
        .national, .international
        {
            width: 394px;
            /*float: left;*/
            height: auto;
            overflow: hidden;
            padding-bottom: 10px;
            margin-left:3px;
            margin-right:5px;
        }
        
        .national
        {
        }
        
        /*
        .international
        {
            margin-left: 1%;
        }*/
       
        .national span, .international span
        {
            display: block;
            background: #3ab54b;
            padding: 5px;
            margin-top: 10px;
        }
        
        .national ul
        {
            margin: 9px 59px -8px -31px;
            height: auto;
            display: block;
            overflow: hidden;
            border-bottom: thin solid #ccc;
            width: 100%;
        }
        
        .national ul li
        {
            float: left;
            display: block;
            list-style: none;
            width: 30%;
            text-align: left;
            margin: 1px;
            border-right: thin solid #ccc;
            padding: 2px;
        }
        
        .national ul:nth-child(odd)
        {
            background: #eee;
        }
        
        .international ul
        {
            margin: 9px 59px -8px -31px;
            height: auto;
            display: block;
            overflow:...

JavaScript

function transitionPage() {
        
            // Hide to left / show from left
            $('.UPS_label').toggle("slide", { direction: "left" }, 500);

            // Show from right / hide to right
            $('.UPS_rate_time').toggle("slide", { direction: "right" }, 500);
        
        }

        $(document).ready(function () {
            //$('#page1').click(transitionPage);
            //$('#page2').click(transitionPage);

            $('#btnTst').toggle(
                function () {
                    $('.UPS_label').click(transitionPage);
                },
                function () {
                    $('.UPS_rate_time').click(transitionPage);
                }
            );

        });