JSFiddle - React, Tailwind, and code Playground

HTML

<!-- tab bar -->
<div class="tabs_bar">
	<ul class="tabs_list">
		<li><a href="#hotels" class="active" id="Hotel">hotels</a></li>
		<li><a href="#meals" id="Meals">meals</a></li>
	</ul>
</div>
<!--end tab bar -->
<!-- tab body -->

<div id="Hotelbody" style="display: none; background-color: red; white-space: nowrap;">
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
        HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
    HOTEL BODY TEXT <br />
</div>
<div id="Mealsbody" style="display: none; background-color: green; white-space: nowrap;">
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
     MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS BODY TEXT <br />
    MEALS...

CSS

.tabs_bar {
    font-family: "Segoe UI Light", "Open Sans Light", "Myriad Pro Light", "Roboto Lt";
    text-align: center;
    width: 40%;
    margin: 10px auto 0px;
    display: block;
}

.tabs_list {
    overflow: hidden;
}
.tabs_list>li {
    display: inline-block;
}
.tabs_list>li a {
    padding: 0px 5px;
    font-size: 30px;
    color: #CCC;
}
.tabs_list>li a:hover {
    color: #333;
}
.active {}
.tabs_list>li a.active {
    color: #F00;
    font-size: 32px;
}
.tab_body {
    width: 100%;
    margin: 10px auto 0px;
    display: block;
    white-space: nowrap;
    
}
.box {
    background: blue;
    display: none;
}
.box:target {
    display: block;
}
.tab_body_list {
    overflow: hidden;
}
.tab_body_list>li {
    display: block;
}

JavaScript

$('#Hotel, #Meals').on('click', function(){
    var el = $('#'+this.id+'body');
    if ( el.is(':visible') ) return false;
    el.animate({width:'toggle'},1000)
    $('#Mealsbody, #Hotelbody').not(el).hide();
});