JSFiddle - React, Tailwind, and code Playground

by Donna Torr

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div id="services">
<div class="row">
<div class="service col-md-2" id="service1"><h2><img onmouseover="this.src='https://tbli.sitewidedesign.co.uk/images/services/advisory-hover.png';" onmouseout="this.src='https://tbli.sitewidedesign.co.uk/images/services/advisory.png';" src="https://tbli.sitewidedesign.co.uk/images/services/advisory.png" alt="advisory" width="20%">Advisory</h2></div>
<div class="service col-md-2" id="service2"><h2><img onmouseover="this.src='https://tbli.sitewidedesign.co.uk/images/services/tbli-weekly-hover.png';" onmouseout="this.src='https://tbli.sitewidedesign.co.uk/images/services/tbli-weekly.png';" src="https://tbli.sitewidedesign.co.uk/images/services/tbli-weekly.png" alt="tbli weekly" width="20%">TBLI WEEKLY</h2></div>
<div class="service col-md-2" id="service3"><h2><img onmouseover="this.src='https://tbli.sitewidedesign.co.uk/images/services/events-hover.png';" onmouseout="this.src='https://tbli.sitewidedesign.co.uk/images/services/events.png';" src="https://tbli.sitewidedesign.co.uk/images/services/events.png" alt="events" width="20%">events</h2></div>
<div class="service col-md.2" id="service4"><h2><img onmouseover="this.src='https://tbli.sitewidedesign.co.uk/images/services/foundation-hover.png';" onmouseout="this.src='https://tbli.sitewidedesign.co.uk/images/services/foundation.png';" src="https://tbli.sitewidedesign.co.uk/images/services/foundation.png" alt="tbli foundation" width="20%">foundation</h2></div>
<div class="service col-5" id="service5"><h2><img onmouseover="this.src='https://tbli.sitewidedesign.co.uk/images/services/capital-hover.png';" onmouseout="this.src='https://tbli.sitewidedesign.co.uk/images/services/capital.png';" src="https://tbli.sitewidedesign.co.uk/images/services/capital.png" alt="advisory" width="20%">captial connect</h2></div>
<div class="container servicebio">

<div class="row serv-info col-md-8...

JavaScript

/* Services transition */
jQuery(function ($) {
$('#service1').click(function() {
   $('#sr1').show();
   $('#sr2').hide();   
   $('#sr3').hide();   
   $('#sr4').hide();
   $('#sr5').hide();
});

$('#service2').click(function() {
   $('#sr1').hide();
   $('#sr2').show();   
   $('#sr3').hide();   
   $('#sr4').hide();  
   $('#sr5').hide();
});
$('#service3').click(function() {
   $('#sr1').hide();
   $('#sr2').hide();   
   $('#sr3').show();   
   $('#sr4').hide();
   $('#sr5').hide();
});
$('#service4').click(function() {
   $('#sr1').hide();
   $('#sr2').hide();
   $('#sr3').hide();   
   $('#sr4').show();
   $('#sr5').hide();
});
$('#service5').click(function() {
   $('#sr1').hide();
   $('#sr2').hide();
   $('#sr3').hide();   
   $('#sr4').hide();
   $('#sr5').show();
});
});