I am in the process of designing a comprehensive resource database featuring a side-scrolling container. Once a user clicks on a thumbnail within the container, the contents of a corresponding div will fade in and display specific category content. Each div element is structured like this:
<div>
<h2>Category1</h2>
<p><a style="float:right" class="a_demo_four" href="/Resources/file1.pdf" target="_blank">
Download
</a>File Desc</p>
<hr/>
</div>
This content loading scenario applies to multiple categories, and I aim to have the ability to showcase all such contents collectively under a "View All" tab. My attempt to use jQuery's load function for achieving this looked like this:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
<h1>This is why I rule</h1>
</body>
</html>
Despite my efforts, I have been unsuccessful in loading original div content into the "View All" category. Unfortunately, my knowledge of Javascript/jQuery is limited, which makes it challenging for me to reuse content across different divs without resorting to manual copying and pasting. This practice would not be sustainable in the long run, especially when adding new files, necessitating code edits in multiple places.
Your assistance is greatly appreciated!