JSFiddle - React, Tailwind, and code Playground

by Nico

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://rawgithub.com/jellekralt/Responsive-Tabs/master/css/responsive-tabs.css">
<script src="https://rawgithub.com/jellekralt/Responsive-Tabs/master/js/jquery.responsiveTabs.js"></script>

<div id="tabs_content_container">
		<div id="tabs_container">
			<ul id="tabs">
				<li class="ui-tabs-active"><a href="#tab1">Parkhäuser&nbsp;und&nbsp;Großparkplätze</a></li>
				<li><a href="#tab2">Motorrad-&nbsp;und&nbsp;Fahrradabstellanlagen</a></li>
				<li><a href="#tab3">Parkscheinautomaten</a></li>
				<li><a href="#tab4">Carsharing</a></li>
				<li><a href="#tab5">E-Ladesäulen</a></li>
				<li><a href="#tab6">Sonstige</a></li>
			</ul>
		</div>

		
		<!-- Parkhäuser und Großparkplätze -->
		<div id="tab1" class="tab_content" style="display: block;">
			
			<ul>
				<li class="List-Element"><strong>Parkhaus Lustgarten</strong>
					<ul>
						<li class="Typ">Parkhaus</li>
						<li class="Oeffnungszeiten">24 h</li>
						<li class="Details"><a href="http://www.stadtverkehr-detmold.de/parken/parkgebuehren-in-detmold" target="_blank">Details</a></li>
					</ul>
				</li>
				<li class="List-Element"><strong>Parkhaus Centrum</strong>
					<ul>
						<li class="Typ">Parkhaus</li>
						<li class="Oeffnungszeiten">24 h</li>
						<li class="Details"><a href="http://www.opg-parken.de/parkplatz-suchen/parkhaus/6326/show/" target="_blank">Details</a></li>
					</ul>
				</li>
				<li class="List-Element"><strong>Kaiser-Wilhelm-Platz</strong>
					<ul>
						<li class="Typ">Parkplatz</li>
						<li class="Oeffnungszeiten">24 h</li>
						<li class="Details"><a href="http://www.stadtverkehr-detmold.de/parken/parkgebuehren-in-detmold" target="_blank">Details</a></li>
					</ul>
				</li>
				<li...

CSS

#tabs {
  width:100%;
  display:table;
  margin-bottom:20px;
}

#tabs li {
  padding:5px;
  background-color:green;
}
.tab_content {
  width: 100%;
  background-color: red;
}

JavaScript

$(document).ready(function(){
        $('#tabs_container').responsiveTabs({
            startCollapsed: 'accordion'
        });
        
					$("#tabs li").click(function() {
						var selected_tab = $(this).find("a").attr("href");
						$("#tabs li").removeClass('ui-tabs-active');
						$(this).addClass("ui-tabs-active");
						$(".tab_content").hide();
						$(selected_tab).fadeIn();
	        
							return false;
					});
          
					if(window.location.hash === '#tab2'){
							$('a[href=#tab2]').click();
						};
	    
				});