JSFiddle - React, Tailwind, and code Playground

by phaas

HTML

<div id="panel">
    <div id="wrapper">
        <div id="content">
            <h1>Notes and explanations <span id="close" class="close">(Close)</span></h1>
                
            <div id="note01" class="note">Note Number 01</div>
            <div id="note02" class="note">Note Number 02</div>
            <div id="note03" class="note">Note Number 03</div>
            <div id="note04" class="note">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</div>
            <div id="note05" class="note">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>
        </div>
    </div>
</div>

<div id="showNotes" onclick="openPanel();">Show Notes</div>
<div id="hideNotes" onclick="closePanel();">Hide Notes</div>
<div id="number01" class="marker">1</div>
<div id="number02" class="marker">2</div>
<div id="number03" class="marker">3</div>
<div id="number04" class="marker">4</div>
<div id="number05" class="marker">5</div>

CSS

body {
    background-color: #F7EDB7;
}

#panel {
    position: absolute;
    top: 5px;
    bottom: 5px;
    margin: 0px;
    right: 0;
}

#hideNotes { 
    display: none;
}
#showNotes, #hideNotes {
    text-decoration: underline;
    cursor: pointer;
}
#wrapper {
    display: none;
    float: left;
    width: 1px;
    background-color: #E0401C;
    border: solid #272F30 1px;
    overflow: hide;
}

#content {
    border: solid black 1px;
    padding: 5px;
    width: 290px;
    overflow: auto;
}

#content h1 {
    font-size: 20px;
    font-weight: bold;
}

.close:hover {
    cursor: pointer;
    background-color: white;
}

.note {
    margin: 3px;
    padding: 3px;
}

.highlightNote {
    background-color: #FFD83D;
}

.marker {
    margin-top: 15px;
    
    height: 25px;
    width: 25px;
    
    text-align: center;
    vertical-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #B22400;
    
    cursor: pointer;
}

.marker:hover {
    background-color: #FFD83D;
}

JavaScript

var duration = 100;

var closePanel = function() {
    // Remove highlight from all notes
    $('.note').removeClass('highlightNote');
    
    $('#showNotes').show();
    $('#hideNotes').hide();

    // resize the panel to width 1, then hide it
    $('#wrapper').animate({
        width: 1
    }, duration, function() {
        $('#wrapper').hide();
    });
}

var openPanel = function(noteID) {
    // Highlight the note
    $('.note').removeClass('highlightNote');
    $(noteID).addClass('highlightNote');

    $('#showNotes').hide();
    $('#hideNotes').show();

    // remove 'display: none' and animate with width to 300px
    var c = $('#wrapper');
    if (!c.is(':visible')) {
        c.css('display', 'block').animate({
            width: 300
         }, duration);
    }
}

// Attach the functions to the window
// to make it visible globally -- not needed outside of jsFiddle
window.openPanel = openPanel;
window.closePanel = closePanel ;
    
$('#close').click(function() {
    closePanel()
});


$('#number01').click(function() {
    openPanel('#note01')
});
$('#number02').click(function() {
    openPanel('#note02')
});
$('#number03').click(function() {
    openPanel('#note03')
});
$('#number04').click(function() {
    openPanel('#note04')
});
$('#number05').click(function() {
    openPanel('#note05')
});