Looking for some assistance with JQuery, as I am relatively new to it. In my project, I have three divs set up - the first serving as the header, the second containing a slideshow of images along with buttons, and the third that should be displayed upon button click. However, once the third div is loaded with an external HTML file after clicking the button, the second div disappears. I've included screenshots below showcasing the issue: output screenshot view screenshots
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="MainScreen.css">
<script type="text/javascript"></script>
<script src="MainScreenJavaScript.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<style>
body{
font-family: "Times New Roman", Georgia, Serif;
}
</style>
</head>
<body>
<!-- Navbar top -->
<div class="topnav" id="myTopnav">
<a href="#home" class="colors" >HOME</a>
<a href="Resume.html" class="colors" >ABOUT</a>
<a href="contact.html" class="colors" >CONTACT</a>
<a href="#icon" class="icon" onclick="myFunction()">☰</a>
</div>
<!--Slide show -->
<div class="slideshow-container ">
<div class="mySlides fade">
<img src="laptop.jpg" class="image">
<div class="text">Keen to learn many things</div>
</div>
<div class="mySlides fade">
<img src="travel2.jpg" class="image">
<div class="text">Like to travel</div>
</div>
<div class="mySlides fade">
<img src="education.jpg" class="image">
<div class="text">Education and Background</div>
</div>
<div class="mySlides fade">
<img src="cook1.jpg" class="image">
<div class="text" >
<button id="cookButton" onclick="loadExternalHtml()">Love for
Cooking</button>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<!-- dots-->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
<div id="content"></div>
<script type="text/javascript">
var slideIndex =1;
showSlides(slideIndex);
function loadExternalHtml(){
$(document).ready(function(){
$("#cookButton").click(function(){
$("#content").load("foodBlog.html"); //load html page onclicking the button
});
});
}
</script>
</body>
</html>
Here is my foodBlog.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container" >
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="text.jpg" class="img-rounded" alt="text"
style="width:100%;height:250px">
<h3>text</h3>
<p>It is a street food</p>
</div>
</div>
<div class="col-md-4 ">
<div class="thumbnail">
<img src="text1.jpg" class="img-rounded" alt="text1"
style="width:100%;height:250px;">
<h3>text1</h3>
<p>text1</p>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="text2.jpg" class="img-rounded" alt="text1"
style="width:100%;height:250px;">
<h3>text2</h3>
<p>text2</p>
</div>
</div>
</div>
</div>
</body>
</html>