EVOLUTION-NINJA

Edit File: robotics_list.php

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<title>Robotics</title>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/main.css');?>" />
	<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/bootstrap.min.css');?>" />
	<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/font-awesome.min.css');?>" />
	
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">	
	
	<script type="text/javascript" src="<?php echo base_url('assets/js/jquery-2.2.4.min.js');?>"></script>
	<script type="text/javascript" src="<?php echo base_url('assets/js/bootstrap.min.js');?>"></script>
	
	<style type="text/css">
			
				
			
				#editmodlist2
				{
					//height: 232px !important;
					width: 326px !important;
				}
				#FrmGrid_list2
				{
					width: 100% !important;
				}
				.ui-jqdialog .ui-jqdialog-titlebar
				{
					height: 29px !important;
					background-color:#2A4474 !important;
					color: white;
					padding-left: 10px;
				}
				.fm-button
				{
					height: 21px !important;
					padding: 1px;					
					margin-right: 10px !important;
					height: 21px !important;				    
				    width: 43%;
				    margin-top: -7px !important;
				}
				.ui-jqdialog-content td.navButton {
					padding-top: 12px !important;
				}
				.ui-jqgrid .ui-jqgrid-titlebar
				{
					height: 27px !important;
					background-color: #2A4474!important;
					color:white !important;
				}
				.ui-jqgrid-bdiv
				{
					height: 232px !important;
				}
				.ui-widget-overlay
				{
					z-index:0 !important;
				}
				
				.text_color a{
	
                    	color:white !important;
                    }

.my-nav{
					width:100% !important;
				}
				.my-nav li{
					width:100% !important;
				}
				.my-nav a:hover{
					color:black !important;
				}
				.navbar-collapse{
					padding-right:0px !important;
					padding-left:0px !important;
				}	
				.menu-left{
					padding-right:0px !important;
				}
			  .list1{
				    
				        color: whitesmoke !important;
                        font-size: 20px !important;
                        float: right !important;
                        padding-top: 20px !important;
				}
				
			</style>
</head>
<body>	
	
	
	<header class="cf">	
		<div class="container">
			<div class="logo col-sm-4">
				<a href="" class="hidden-xs hidden-sm"><img src="<?php echo base_url('assets/img/yaskawa_logo.png');?>" class="img-responsive"></a>
				<a href="" class="hidden-md hidden-lg"><img src="<?php echo base_url('assets/img/yaskawa_logo2.png');?>" class="img-responsive center-block"></a>
			</div>
	  <ul class="list-inline" style="float:right;">
	    <li><a class="list1" href="<?php echo site_url('controller/robotics_form');?>">Robotics Form</a></li>
	    <li><a class="list1" href="<?php echo site_url('controller/logout');?>">Logout</a></li>
	  </ul>

</div>
	</header>
	
		
		<div class="main-container ace-save-state" id="main-container">
			<script type="text/javascript">
				try{ace.settings.loadState('main-container')}catch(e){}
			</script>
			<div class="row">
       
			
		<div class="middle_work_hedding">
		<div class="container">
			<h3><em>Robotics Product Explorer</em></h3>		
		</div>
	</div>
	
	
	
	<div class="middle_work_table">
		<div class="container">			
			
			
<?php foreach($res as $product) { ?>			
	<button class="accordion"><?php echo $product->category;?></button>
<div class="panel" style="overflow-y: scroll; height: 250px;">

<table class="table table-striped " style="border-radius: 10px !important;" >
					<thead>
						<tr>
							<th style="border-top-left-radius: 10px !important;">Model</th>							
							<th>Specification</th>
							<th>Payload</th>
							<th>Reach</th>
							
							<th style="border-top-right-radius: 10px !important;">Download</th>	
						</tr>
					</thead>
					
						<tbody>
					<?php foreach($robot as $man) { if($product->category == $man->category) {?>
						<tr>
							<td><?php echo $man->model;?></td>
							<td><?php echo $man->specification;?></td>
							<td><?php echo $man->payload;?></td>
							<td><?php echo $man->reach;?></td>
						
							<td>
								<a href="<?php echo base_url($man->files); ?>" target="new_blank" class="downloads">Download &nbsp <i class="fa fa-download" aria-hidden="true"></i></a>
							</td>						
						</tr>
						
					 <?php } }?>
					 
					</tbody>
				  </table>
  
</div>
<?php }		?>
	
			
		</div>
	</div>
	</div>
</div>		
	
	<footer>
		<div class="top-bg">		
		<div class="container">			
			<ul class="top_marqu">
				<li><a href="tel:+91-9731676611"><i class="fa fa-mobile" aria-hidden="true"></i> : +91 9731676611</a></li>
					<li><a href="mailto:services@yaskawa.in"><i class="fa fa-envelope-o" aria-hidden="true"></i> : services@yaskawa.in</a></li>
					<li><a href=""> | </a></li>
				<li><a href="tel:+91-9711351351">North <i class="fa fa-mobile" aria-hidden="true"></i> : +91 9711351351</a></li>
				<li><a href="tel:+91-9620512399">South <i class="fa fa-mobile" aria-hidden="true"></i> : +91 9620512399</a></li>
			</ul>	
		</div>
	</div>
	</footer>
</body>
</html>

	
	<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}
</script>
	<style>
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;
}
.panel
{
padding-top:5px !important;
padding-bottom:5px  !important;
}
</style>