JSFiddle - React, Tailwind, and code Playground

by 5arx

HTML

<div class="literaltext">
        <p> We utilize two types of systems for mixing EnerBurn&reg; with your fuel supply to deliver it to your diesel engine,<br /> On-Board systems and Bulk Fueling systems. Click on an item below for more information.</p>
        <ul class="ulGreen">
            <li><b>On-Board systems - Road Vehicle</b><span style="color:black;"> (See an installation picture<a href="#" class='001'>here</a>)</span> </li>
            <li><b>On-Board systems - Marine Vessel</b><span style="color:black;"> (See an installation picture<a href="#" class='002'>here</a>)</span> </li>
            <li><b>On-Board systems - Fueling Barge</b><span style="color:black;"> (See an installation picture<a href="#" class='003'>here</a>)</span> </li>

        </ul>
</div>
<div id="onBoardVehiclepicdisplay" class="toHide div-001">
        <fieldset class="dynamicinjectionpics">
            <legend>"Schlumberger On-Board Injection Unit"</legend>
             <img Height="300px" Width="400px" alt=""
             src="Images/InjectionUnitPictures/SchlumbergerInjectionUnit_FrackTruck.jpg"/>&nbsp;&nbsp;&nbsp;
             <img Height="300px" Width="400px" alt=""
             src="Images/InjectionUnitPictures/SchlumbergerInjectionUnit_FrackTruck_withEnclosure.jpg"/>
             <br /><span id="Image1Text" runat="server">Typical injection unit installation (shown here on a Fracking Unit)</span>

        </fieldset>
    </div>
    <div id="onBoardVesselpicdisplay" class="toHide div-002">
        <fieldset class="dynamicinjectionpics">
            <legend>"Vessel Fuel Intake Line Mounted Injection System"</legend>
             <img Height="300px" Width="400px" alt=""
             src="Images/InjectionUnitPictures/SP-600 Injector.jpg"/>&nbsp;&nbsp;&nbsp;
             <img Height="300px" Width="400px" alt=""
             src="Images/InjectionUnitPictures/MarionInjector Installation.JPG"/>
             <br /><span id="Span1" runat="server">Typical injection unit installation for...

JavaScript

$(document).ready(function() {
    //Hide all of them initially
    $('.toHide').hide();
});

$('LI A').click(function() {
    $('.toHide').hide(); //hide all the divs first 
    $('.div-' +    ($(this).attr('class'))).show(); //reveal the one you want.
});