I have various sections within different divs that I want to display without the need for manual clicking on tabs. While I've been able to toggle the visibility of these sections by clicking, I would prefer them to display automatically in a loop using jQuery. Below are the codes I've been working on:
$(document).ready(function(){
$('#advantages').click(function(){
$('#featureContent').fadeOut(400).addClass('hidden');
$('#advantageContent').fadeIn(400).removeClass('hidden');
$('#benefitsContent').fadeOut(400).addClass('hidden');
});
$('#benefits').click(function(){
$('#featureContent').fadeOut(400).addClass('hidden');
$('#advantageContent').fadeOut(400).addClass('hidden');
$('#benefitsContent').fadeIn(400).removeClass('hidden');
});
$('#features').click(function(){
$('#featureContent').fadeIn(400).removeClass('hidden');
$('#advantageContent').fadeOut(400).addClass('hidden');
$('#benefitsContent').fadeOut(400).addClass('hidden');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="featureLinks" class="col-lg-6 col-md-6 col-sm-6">
<ul class="text-center">
<li id="features"> Smart travel </li>
<li id="advantages"> Smart route </li>
<li id="benefits"> Smart payment </li>
</ul>
</div>
<div id="featureContent" class="col-lg-6 col-md-6 col-sm-6">
<h2 class="text-center"> Smart travel </h2>
<ul>
<li>All your favourite transit service providers like Uber, KLM, Great Western Rail and Blue Star Ferries on one integrated app! </li>
<li>Compare the availability, price and ETA for taxis/buses, flights, metro andferries, anytime and anywhere.
</li>
</ul>
</div>
<div id="advantageContent" class="col-lg-6 col-md-6 col-sm-6 hidden">
<h2 class="text-center"> Smart Route </h2>
<ul>
<li> Big data is finally at your service</li>
<li>Go where you've never gone before with integrated Satellite navigation system.</li>
</ul>
</div>
<div id="benefitsContent" class="col-lg-6 col-md-6 col-sm-6 hidden">
<h2 class="text-center"> Smart Payment </h2>
<ul>
<li> Experience the ease and security of paying via the app. </li>
</ul>
</div>