JSFiddle - React, Tailwind, and code Playground

by nogoodatcoding

HTML

This page has hidden content that will load when you click the links:

<div class="toload" id="div1">
    This is a cotent div
</div>
<div class="toload" id="div2">
    This is another content div
</div>

<a href="#div1" class="divload" >Show content1</a>
<a href="#div2" class="divload">Show content2</a>

CSS

.toload{
    display: none;
    border: solid 2px gray;
    background-color: #999;
    padding: 5px;
    margin: 2px;
}

.divload{
    border: 1px solid gray;
    background-color: black;
    margin: 2px;
    display: block;
    color: white;
    width: 150px;
    text-align: center;
    valign: middle
}

JavaScript

$('.divload').click(function(){
    var id = $(this).attr('href').substr(1);
console.log(id);
    $('.displayed').fadeOut('fast').removeClass('displayed');
    $('#' + id).fadeIn().addClass('displayed');
    return false;
});