JSFiddle - React, Tailwind, and code Playground
HTML
<div class="literaltext">
<p> We utilize two types of systems for mixing EnerBurn® 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="#" data-rel="onBoardVehiclepicdisplay">here</a>)</span> </li>
<li><b>On-Board systems - Marine Vessel</b><span style="color:black;"> (See an installation picture<a href="#" data-rel="onBoardVesselpicdisplay">here</a>)</span> </li>
</ul>
</div>
<div id="onBoardVehiclepicdisplay" class="invisible">
<fieldset class="dynamicinjectionpics">
<legend>"Schlumberger On-Board Injection Unit"</legend>
<img Height="300px" Width="400px" alt=""
src="Images/InjectionUnitPictures/SchlumbergerInjectionUnit_FrackTruck.jpg"/>
<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="invisible">
<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"/>
<img Height="300px" Width="400px" alt=""
src="Images/InjectionUnitPictures/MarionInjector Installation.JPG"/>
<br /><span id="Span1" runat="server">Typical injection unit installation for single vessel</span>
</fieldset>
</div>
CSS
.invisible { display: none; }
JavaScript
$('.ulGreen').delegate('li a', 'click', function(e){
e.preventDefault();
var target = $(this).attr('data-rel');
$('#' + target).toggleClass('invisible');
});