I have organized my website with links on the left sidebar and matching content in the right sidebar, structured within appropriate div elements.
My goal is to display only one div at a time when a user clicks on one of the links located on the left side. Can someone provide assistance with this functionality?
The HTML structure is as follows:
<div id="sidebar2">
<div id="companyimage"><img src="siteimages/imagetest.jpg"></div>
<div id="historyimage"><img src="siteimages/imagetest2.jpg"></div>
<div id="awardsimage"><img src="siteimages/imagetest3.jpg"></div>
<div id="publications"><img src="siteimages/imagetest4.jpg"></div>
<div id="portfolio"> Embedded an Issuu PDF here. </div>
</div>
The links can be found in sidebar 1.
I utilized jQuery and successfully implemented code to hide one div and show another. However, I am unsure how to handle scenarios where users click on random links. Ideally, I want to hide the current div and reveal the corresponding one.
Here is the script I currently have:
<script>
$(document).ready(function(){
$("#showpublications").click(function(){
$("#companyimage").hide();
$("#publications").fadeIn(1500);
});
});
</script>
Any form of assistance on this matter would be greatly appreciated!