jQuery horizontal responsive tab doesn't work in CakePHP 3.x

Need Help
1

Morning,
I have write code jQuery horizontal responsive tab and call inside file main contents

in plugins\Kucing\Src\Template\Articles\beranda.ctp

<html>
<head>
<?php
  echo $this->Html->script('Kucing.jquery-2.1.4.min.js');
  echo $this->Html->script('Kucing.bootstrap-3.1.1.min.js');
  echo $this->Html->script('Kucing.easy-responsive-tabs.js');
?>
<!--responsive-tabs-script-->
<script>
	$(document).ready(function () {
		$('#horizontalTab').easyResponsiveTabs({
			type: 'default', //Types: default, vertical, accordion           
			width: 'auto', //auto or any width like 600px
			fit: true,   // 100% fit in a container
			closed: 'accordion', // Start closed if in accordion view
			activate: function(event) { // Callback function if tab is switched
			   var $tab = $(this);
			   var $info = $('#tabInfo');
			   var $name = $('span', $info);
			   $name.text($tab.text());
		           $info.show();
			}
		});
		$('#verticalTab').easyResponsiveTabs({
			type: 'vertical',
			width: 'auto',
			fit: true
		});
	});
</script>
</head>
<body>
   <div id="horizontalTab">				
	<ul class="resp-tabs-list">
	     <li><?php echo $this->Html->image('Kucing.a1.jpg', ['alt' => 'image']); ?></li>
	     <li><?php echo $this->Html->image('Kucing.a2.jpg', ['alt' => 'image']); ?></li>
	     <li><?php echo $this->Html->image('Kucing.a3.jpg', ['alt' => 'image']); ?></li>
	     <li><?php echo $this->Html->image('Kucing.a4.jpg', ['alt' => 'image']); ?></li>
	</ul>
	<div class="resp-tabs-container">
	   	<div class="tab1">
		     <?php echo $this->Html->image('Kucing.a11.jpg', ['alt' => 'image']); ?>
			  <div class="pet-info">
			       <ul>
				   <li><span>Lorem Ipsum</span></li>
				   <li><span>Gender : </span>Female</li>
				   <li><span>Age : </span>1 years</li>
			      </ul>
			  </div>
			 <div class="clear"></div>
	        </div>
					
		<div class="tab2">
		     <?php echo $this->Html->image('Kucing.a22.jpg', ['alt' => 'image']); ?>
			  <div class="pet-info">
				<ul>
				     <li><span>Fusce mollis</span></li>
				     <li><span>Gender : </span>Male</li>
				     <li><span>Age : </span>3 Months</li>
				</ul>
			  </div>
		</div>

	        <div class="tab3">
		    <?php echo $this->Html->image('Kucing.a33.jpg', ['alt' => 'image']); ?>
			 <div class="pet-info">
			      <ul>
				   <li><span>Aliquam erat</span></li>
				   <li><span>Gender : </span>Male</li>
				   <li><span>Age : </span>2 years</li>
			     </ul>
			 </div>
		</div>
		<div class="tab4">
		     <?php echo $this->Html->image('Kucing.a44.jpg', ['alt' => 'image']); ?>
			  <div class="pet-info">
				<ul>
				    <li><span>Pellentesque</span></li>
				    <li><span>Gender : </span>Female</li>
				    <li><span>Age : </span>6 Months</li>
				</ul>
			   </div>
		</div>
	</div>
</div>

</body>
</html>

after I running, the picture was shown complete, but the function jQuery horizontal responsive tabs, doesn’t work.

I hope need your help, thanx

2

This seems like a jQuery problem, not a CakePHP one?

3

if I’m running in pure HTML, the jQuery normal running…

4

Then compare the HTML that works with what CakePHP is generating. If you need Cake to generate something specific and it’s not, then show that exact requirement and your code and what your code is generating.

5

I use a top responsive nav from

https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

In cakephp. I doubt JQuery has anything to do with something not working , you probably need to recheck your code for mistakes.

Cakephp being a PHP framework means if it works in PHP it will work in cakephp.

I also use laravel, and this comes up very often something in jQuery does not work in laravel.

Yet there has never been a jQuery problem or a laravel problem it’s always users syntax errors. Or the user not following an example correctly.