JSFiddle - React, Tailwind, and code Playground

by jameshuckabonetech

HTML

<div id="next">Next</div>
<div id="previous">Previous</div><br style="clear: both;"><br>
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" style="" role="tablist">
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="true" aria-selected="true" tabindex="0" style="color: #7DC640 !important" onclick="jumpTo(1)">Chapter One</h3>
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;">
    asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        <span class="highlight">Term</span>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        <span class="highlight">Term</span>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
    ...

CSS

.highlight{
    color: #ffff00;
}

#next{
    float: right;
    background-color: #ff9900;
    color: #000;
    cursor: pointer;
    padding: 10px;
    font-family: arial;
    margin: 5px;
}
#previous{
    float: right;
    cursor: pointer;
    background-color: #ff9900;
    color: #000;
    padding: 10px;
    font-family: arial;
    margin: 5px;
}

JavaScript

$( "#accordion" ).accordion({
        autoHeight: false, collapsible: true, active: false
    });

function jumpTo(chapter_number)
{
   // make an array of ".highlight" classed elements within this chapter and automatically scroll to the first one.  Further to this, I have floating elements (#next,#previous) to jump to subsequent occurrences. 
}