Please see my code folks, I'm desperate..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- jquery ui -->
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
function slideFav() {
alert("in slideFav");
$('#myFavCarousel').carousel('next');
}
</script>
</head>
<body>
<!-- favorite content -->
<div id="favorite">
<div class="page-header">
<h3>Favorites</h3>
</div>
<div class="well well-sm">
<!-- CAROUSEL START HERE **************************************************-->
<div id="myfavCarousel" class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="panel panel-default item active">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#legislators" aria-controls="legislators" role="tab" data-toggle="tab">Legislators</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="legislators">
<div class="panel-heading" style="overflow:hidden;">
<span class="panel_heading_text">Favorite Legislators</span>
</div>
<!-- panel_heading -->
<!-- FAVOIRTE**************************************************-->
<div class="panel-body">
<table class="table table-hover table-responsive" id="all_favorite_table">
<thead>
<tr>
<th> </th>
<th>Image</th>
</tr>
<tr>
<th><button id=FavDetail type='button' class='btn btn-primary' onclick='slideFav()'>View Details</button></th>
<th>Image</th>
</tr>
</thead>
</table>
</div>
<!-- panel_body -->
</div>
<!-- ******************************************************* -->
</div>
<!-- tab-content -->
</div>
<!-- panel panel-default item active -->
<!-- DETAILDED PAGE******************************************************* -->
<div class="panel item">
<div class="panel-heading row">
<div>
<!-- change button func to slideFav()-->
<div style="float:left; margin-left:15px;"><button href="#myfavCarousel" data-slide="prev" class="glyphicon glyphicon-chevron-left btn btn-default" id="fav_prev_button"></button></div>
<div class="page-header" style="font-size: 20px; padding-top: 5px; padding-bottom: 12px;"> Details</div>
</div>
</div>
<!-- DETAILDED PAGE for favorite******************************************************* -->
</div>
</div>
<!-- carousel-inner -->
</div>
<!-- carousel slide -->
</div>
</div>
<!-- main_favorite -->
</body>
</html>I'm trying to realize the function that if you click on the button "view Detail", it will slide to the detail page using jquery. It's not working, I could not figure out what is wrong with my code, please help! Thank you so much in advance!
