JSFiddle - React, Tailwind, and code Playground

by mrmartineau

HTML

<!-- NOTICEBOARD NAV -->
<a id="notice-prev" href="#">&laquo;</a>
<a id="notice-next" href="#">&raquo;</a>
<!-- /NOTICEBOARD NAV -->

<div class="noticeboard clearfix">
    <span class="notice">
        NEWS1 
    </span>
    <span class="notice">
        NEWS2 <br /> Long Newsgdfgdfgdfsgsdgdg<br /> Long Newsgdfgdfgdfsgsdgdg<br /> Long Newsgdfgdfgdfsgsdgdg<br /> Long Newsgdfgdfgdfsgsdgdg
    </span>
    <span class="notice">
        NEWS3
    </span>
    <span class="notice">
        NEWS4
    </span>
     <span class="notice">
        NEWS5
    </span>
</div>

<div class="line"></div>

CSS

body  { background: #eeeeee; }

/* NOTICE BOARD */
.noticeboard { display: block; position: relative; height: 50px; clear: both;}
.noticeboard span { position: absolute; top: 20px; left:0px;}

#notice-next { position: absolute; top: 10px; left: 30px; z-index: 100;}
#notice-prev { position: absolute; top: 10px; left: 10px; z-index: 100;}


.line { display: block; height: 2px; background: #fff;}


/* ClearFIX */
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
/* .clearfix { display: inline-block; }
 */* html .clearfix { height: 1%; }
.clearfix { display: block; background-color:gray; }

JavaScript

// Noticeboard
$('.noticeboard span').hide();
$('.noticeboard span:first').show();

$(document).ready(function(){
   //Set height
    var height = 0;
    $('.noticeboard span').each(function(){
        if(height < $(this).height())
            height = $(this).height();    
    });
    //+20 because of the top-offset
    $("div.noticeboard").css("height",(height+20)+"px"); 
});

$('#notice-next').click(function(event) {
    if ($('.noticeboard span:visible').is('.noticeboard span:last-child')) {
        $('.noticeboard span:visible').fadeOut();
        $('.noticeboard span:first-child').fadeIn();
    }
    else {
        $('.noticeboard span:visible').fadeOut().next().fadeIn();
    }

    event.preventDefault();
    
});

$('#notice-prev').click(function(event) {
    if ($('.noticeboard span:visible').is('.noticeboard span:first-child')) {
        $('.noticeboard span:visible').fadeOut();
        $('.noticeboard span:last-child').fadeIn();
    }
    else {
        $('.noticeboard span:visible').fadeOut().prev().fadeIn();
    }

    event.preventDefault();
});