JSFiddle - React, Tailwind, and code Playground

by Alfie

HTML

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="slider">
    <!-- Lamb Kebab Pizza -->
    <input type="radio" name="slide_switch" value="kebab" id="id1" checked="checked" />
    <label for="id1">
        <img src="../img/kebab.jpg" width="100" alt="Lamb Kebab Pizza" class="img img-responsive" />
    </label>
    <img src="../img/kebab.jpg" class="img img-responsive" />
    <!-- Fennel Sausage Pizza -->
    <input type="radio" name="slide_switch" value="fennel" id="id2" />
    <label for="id2">
        <img src="../img/fennel_copy.jpg" width="100" alt="Fennel Sausage Pizza" class="img img-responsive" />
    </label>
    <img src="../img/fennel_copy.jpg" class="img img-responsive" />
    <!-- Pistachio and Sausage Pizza -->
    <input type="radio" name="slide_switch" value="pistachio" id="id3" />
    <label for="id3">
        <img src="../img/pistachio.jpg" width="100" alt="Pistachio and Sausage Pizza" class="img img-responsive" />
    </label>
    <img src="../img/pistachio.jpg" class="img img-responsive" />
    <!-- White Truffle Pizza -->
    <input type="radio" name="slide_switch" value="white" id="id4" />
    <label for="id4">
        <img src="../img/white_truffle.jpg" width="100" alt="White Truffle Pizza" class="img img-responsive" />
    </label>
    <img src="../img/white_truffle.jpg" class="img img-responsive" />
    <!-- Surly Pizza -->
    <input type="radio" name="slide_switch" value="surly" id="id5" />
    <label for="id5">
        <img src="../img/surly_pizza.jpg" width="100" alt="Surly Pizza" class="img img-responsive" />
    </label>
    <img src="../img/surly_pizza.jpg" class="img img-responsive" />
</div>
<!-- Lamb Kebab Pizza -->
<div class="kebab common">Kebab</div>
<!-- Fennel Sausage Pizza -->
<div class="fennel common">Fennel</div>
<!-- Pistachio and Sausage Pizza -->
<div class="pistachio common">Pistachio</div>
<!--...

JavaScript

$('img').hide();
$('.common').hide();
$("input[name='slide_switch']").click(function () {
    $('img').hide();
     $('[src*="'+this.value+'"]').show();
    $('.common').hide();
    $('.' + this.value).show();
}).click();