JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<section id="trading" class="section">
        <div id="trading_background"></div>
        <div class="trading copy">
            <div class="text_block">
                <h2 class="class_h2 "> Reduce Trading Risk with Hedging Support</h2>
<p>As an introducing broker with RJ O’Brien, the nation’s largest and most established futures brokerage and clearing firm, Nova Energy provides hedging support through a wide range of financial services that reduce the inherent risk in petroleum marketing. These include:</p>
                <ul id="ul_trade">
                    <li>
                        <h3 class="class_h3">Including Futures</h3>
                    </li>
                    <li>
                        <h3 class="class_h3">Options</h3>
                    </li>
                    <li>
                        <h3 class="class_h3">SWAPs</h3>
                    </li>
                    <li>
                        <h3 class="class_h3">Over-the-counter transactions</h3>
                    </li>
                </ul>
                </div>
                <p id="trading_more"><em>learn more→</em></p>
        </div>
        <div class="trading content">
 <h3>
 Experience and Insights Add Value
 </h3> 
<p>The ability to hedge fuel is complex, which is where Nova Energy’s experience comes into play. We can help determine which financial services best fit your risk management goals, whether this is futures and options trading, hedging or fixed forward pricing. </p><p>
With hedging, you seek to reduce risk by taking an equal short position in the futures market of the same commodity. Nova Energy can secure hedges on a variety of commodities including WTI, Brent, heating oil, gas, fuel oil and soybean oil and can trade any commodities listed on the Chicago Mercantile Exchange or ICE. </p><p>
With fixed forward pricing, you can use hedging to establish future market prices for long-term fuel purchases. This allows you to secure long-term relationships with your...

CSS

.trading.copy {
            position: absolute;
            top: 0;
            left: 20vw;
            width: 40vw;
            height: 100vh;
            background: #f6f6f6;
            transition: transform 0.5s, opacity 0.5s;
        }

        .trading.content {
            position: absolute;
            top: 0;
            right: 0vw;
            width: 40vw;
            height: 100vh;
            background: #f6f6f6;
            opacity: 0;
            transition: opacity 0.5s;
            background: #000000;
            color: #ffffff;
            
        }
        p#trading_more {
    position: absolute;
    top: 80vh;
}

JavaScript

var tradingCopy = document.querySelector('.trading.copy');
    var tradingContent = document.querySelector('.trading.content');
    var isClicked = false;

    document.getElementById('trading_more').addEventListener('click', function () {
        if (isClicked) {
            tradingCopy.style.transform = 'none';
            tradingCopy.style.opacity = '1';

            tradingContent.style.opacity = '0';
        } else {
            tradingCopy.style.transform = 'translateX(-20vw)';
            //tradingContent.style.transform = 'translateX(40vw)';
            tradingCopy.style.opacity = '.7';

            tradingContent.style.opacity = '1';
        }

        isClicked = !isClicked;
    });