asked on

Changing way home page shows

I have this web page:

<?php 
session_start();
$username= $_SESSION['username'];
require "connection.php";
error_reporting(E_ALL);
ini_set('display_errors',1);
?>



<!DOCTYPE HTML>

<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href = "http://fonts.googleapis.com/css?family=Roboto:400">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.tabbable-panel {
  border:1px solid #eee;
  padding: 10px;
}

/* Default mode */
.tabbable-line > .nav-tabs {
  border: none;
  margin: 0px;
}
.tabbable-line > .nav-tabs > li {
  margin-right: 2px;
}
.tabbable-line > .nav-tabs > li > a {
  border: 0;
  margin-right: 0;
  color: #737373;
}
.tabbable-line > .nav-tabs > li > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
  border-bottom: 4px solid #fbcdcf;
}
.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
  border: 0;
  background: none !important;
  color: #333333;
}
.tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
  margin-top: 0px;
}
.tabbable-line > .nav-tabs > li.active {
  border-bottom: 4px solid #f3565d;
  position: relative;
}
.tabbable-line > .nav-tabs > li.active > a {
  border: 0;
  color: #333333;
}
.tabbable-line > .nav-tabs > li.active > a > i {
  color: #404040;
}
.tabbable-line > .tab-content {
  margin-top: -3px;
  background-color: #fff;
  border: 0;
  border-top: 1px solid #eee;
  padding: 15px 0;
}
.portlet .tabbable-line > .tab-content {
  padding-bottom: 0;
}

/* Below tabs mode */

.tabbable-line.tabs-below > .nav-tabs > li {
  border-top: 4px solid transparent;
}
.tabbable-line.tabs-below > .nav-tabs > li > a {
  margin-top: 0;
}
.tabbable-line.tabs-below > .nav-tabs > li:hover {
  border-bottom: 0;
  border-top: 4px solid #fbcdcf;
}
.tabbable-line.tabs-below > .nav-tabs > li.active {
  margin-bottom: -2px;
  border-bottom: 0;
  border-top: 4px solid #f3565d;
}
.tabbable-line.tabs-below > .tab-content {
  margin-top: -10px;
  border-top: 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}
 table, th,td {
    border: 1px solid;
}
.container{
	margin:0px !important
	
}
.readonly-input {
    border: 0;
}
</style>

<script>
$(function() {
  $('.change').focus(function() {
    $(this).removeClass('readonly-input').prop('readonly', false);
  });
  $('.change').blur(function() {
    $(this).addClass('readonly-input').prop('readonly', true);
  });
});
</script>

</head>

<body>
<div class="container">
    <div class="row" style="width:200%">
		<div class="col-md-12">
			<h3>Welcome <?php echo $username;?>!</h3>

			<div class="tabbable-panel">
				<div class="tabbable-line">
					<ul class="nav nav-tabs ">
						<li class="active">
							<a href="#cold" data-toggle="tab">
							Cold  </a>
						</li>
						<li>
							<a href="#commerical" data-toggle="tab">
							Coml </a>
						</li>
								<li>
							<a href="#cross" data-toggle="tab">
							Cross-Sell </a>
						</li>
								<li>
							<a href="#alia" data-toggle="tab">
							LALIA </a>
						</li>
			
					<li>				
							<a href="#win" data-toggle="tab">
							Win </a>
						</li>
					
					</ul>
					<div class="tab-content">
						<div class="tab-pane active" id="cold">
							<p>
								Cold
								<br>					
							</p>
							<p>
							
	</p>
	
						</div>
						<div class="tab-pane" id="com">
							<p>
								Com
							</p>
							
						</div>
						
							<div class="tab-pane active" id="cross">
							<p>
								Cross
							</p>
							<p>
					
							</p>

						</div>
						
						
						<div class="tab-pane active" id="alia">
							<p>
								LALIA
							</p>
			
							</p>

						</div>
						
						
					
						
												
				
												
						<div class="tab-pane active" id="win">
							<p>
								Win
							</p>
							<p>
							
							</p>
						</div>					
						
						
						
					</div>
				</div>
			</div>


		</div>
	</div>
</div>
<br>
<br>
<br>
<br>

</body>
</html>

Open in new window

All the tabs show on the index page, how can I just make Cold show? and the others show whenever you click on there tab?

Steve Bink

You would need to hide the tab content elements until their owning tab element is clicked/made active.

Instead of re-inventing this wheel, have you considered using jQuery UI's Tab controls?

ASKER CERTIFIED SOLUTION

Steve Bink

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial