JSFiddle - React, Tailwind, and code Playground

by sushanth009

HTML

<p id="showLessHours" class="hours-less">	<span class="day"></span>
	<span class="opHours"></span>
	<a href="#" class="hours-more"> (show)</a>

</p>
<div id="showMoreHours" class="col-md-12 no-padding hours-more">
    <p>
        <!-- th:class="${'MON'.equalsIgnoreCase(#dates.dayOfWeekNameShort(#dates.createNow())) ? 'mon currentDay' : 'mon'}"> -->	<span class="day">Monday</span>  <span class="opHours">{{results.businessHours['hours']['MON']}}</span>

    </p>
    <p>	<span class="day">Tuesday</span>  <span class="opHours">{{results.businessHours['hours']['TUE']}}</span>

    </p>
    <p>	<span class="day">Wednesday</span>  <span class="opHours">{{results.businessHours['hours']['WED']}}</span>

    </p>
    <p>	<span class="day">Thursday</span>  <span class="opHours">{{results.businessHours['hours']['THURS']}}</span>

    </p>
    <p>	<span class="day">Friday</span>  <span class="opHours">{{results.businessHours['hours']['FRI']}}</span>

    </p>
    <p>	<span class="day">Saturday</span>  <span class="opHours">{{results.businessHours['hours']['SAT']}}</span>

    </p>
    <p>	<span class="day">Sunday</span>  <span class="opHours">{{results.businessHours['hours']['SUN']}}</span>
	<a href="#" class="hours-less"> (hide)</a>

    </p>
</div>

JavaScript

var currentTime = new Date();
	var today = currentTime.getDay(); //0-7

	var d = new Date();
	var weekday = new Array(7);
	weekday[0] = "Sunday";
	weekday[1] = "Monday";
	weekday[2] = "Tuesday";
	weekday[3] = "Wednesday";
	weekday[4] = "Thursday";
	weekday[5] = "Friday";
	weekday[6] = "Saturday";

	alert('today is:' + weekday[today]);

	$('#showLessHours span.day').html(weekday[today]);

	$.each($('#showMoreHours p span.day'), function (index, item) {
        
        var $this = $(this);

	    if (typeof $this.html() != 'undefined') {
	        alert('item.text:' + $this.html());
	        alert('weekday[today]' + $this.html().indexOf(weekday[today]));

	        if ($this.html().indexOf(weekday[today]) != -1) {
	            alert("check which element has added class currentDay:");
	            $this.addClass('currentDay');
	        } else {
	            if ($this.hasClass('currentDay')) {
	                $this.removeClass('currentDay');
	            }
	        }
	    }
	});

	$('.hours-less').bind('click', function (e) {
	    $('#showMoreHours').show();
	    $('#showLessHours').hide();
	});

	$('.hours-more').bind('click', function (e) {
	    $('#showLessHours').show();
	    $('#showMoreHours').hide();
	});