JSFiddle - React, Tailwind, and code Playground

by sutherland

HTML

<input type="button" onclick="showSlide(1);" value="Show Slide 1"/>
<input type="button" onclick="showSlide(2);" value="Show Slide 2"/>
<input type="button" onclick="showSlide(3);" value="Show Slide 3"/>

<div id="slide1" class="slide">This is slide one.</div>
<div id="slide2" class="slide">This is slide two.</div>
<div id="slide3" class="slide">This is slide three.</div>

CSS

.slide {
    display: none;
}

.slide.current {
    display: block;
}

JavaScript

var slide1, slide2, slide3;

function showSlide(number) {
    // Clear all the slide class names
    slide1.className = "slide";
    slide2.className = "slide";
    slide3.className = "slide";
    // Set the current slide
    window["slide"+number].className += "current";
}

function init() {
    slide1 = document.getElementById("slide1");
    slide2 = document.getElementById("slide2");
    slide3 = document.getElementById("slide3");
    showSlide(1);
}

window.addEventListener('load',init,false);