JSFiddle - React, Tailwind, and code Playground

by Brian Chang

HTML

<div class="hint"><div class="hint-content"> Hello 1 !!</div></div>

<div class="hint"><div class="hint-content"> Hello 2 !! Yoooooooooooooooooooooooooooooo<br>oooooooooooooooooooooooooooooooooo<br>ooo</div></div>

<div class="hint"><div class="hint-content"> Hello 3 !!</div></div>

CSS

.hint {
    border: 2px solid black;
    height: 150px;
    display: none;
}

.mover {
    background: #900;
    text-decoration: none;
    padding: 6px 12px;
    color: white;
    font-weight: bold;
}

.prev-tab {
    float: left;
}

.next-tab {
    float: right;
}

.hint-content {
   height: 100px;
    padding: 6px 12px;
}

JavaScript

$(document).ready(function(){
    $('.hint').eq(0).css("display", "block");
    $('.hint .hint-content:not(:first)').after("<a href='#' class='prev-tab mover'>&#171; Prev Page</a>");
    $('.hint .hint-content:not(:last)').after("<a href='#' class='next-tab mover'>Next Page &#187;</a>");    
    $('.next-tab').click(function(){
        $(this).parent().toggle();
        $(this).parent().next().toggle();
        return false;  // to prevent from jumping to the top of the page
    });
    $('.prev-tab').click(function(){
        $(this).parent().toggle();
        $(this).parent().prev().toggle();
        return false;
    });
});