Is there a way to update the content inside two divs simultaneously when a button is clicked? Specifically, I want to change the bio in one div and the picture in another based on the selected player. Currently, when the button is pressed, it only loads the same content in both divs.
<section id="container">
<div id="playerMenu">
<nav>
<h3>Choose a Player</h3>
<ul>
<li><a href="adnan" >Adnan Januzaj</a></li>
<li><a href="movie-2">Movie 2</a></li>
<li><a href="movie-3">Movie 3</a></li>
</ul>
</nav>
</div>
<article class="playerPic">
<section id="picture">
<div id="adnan1">
<img src="images/januzaj.png"/>
</div>
</article>
<div class="playerBio">
<section id="content">
<div id="adnan">
<p> Bio for Adnan Januzaj Goes Here</p>
</div>
</div>
</section>
</section>
</section>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#playerMenu ul li a').click(function(){
$('#content').load('players.html #' + $(this).attr('href'));
return false;
});
$('#playerMenu ul li a').click(function(){
$('#picture').load('players.html #' + $(this).attr('href'));
return false;
});
});
</script>
All data and images are being fetched from a separate HTML file named players.html
<div id="adnan">
<h2>Adnan Januzaj></h2>
<p>Bio for Adnan Januzaj Goes Here.</p>
<div id="adnan1">
<img src="images/januzaj.png"/>
</div>
</div>
<div id="movie-2">
<h2>Phil Jones</h2>
<img src="images/jones.jpg"/>
<p>Bio for Phil Jones Goes Here.</p>
</div>
I'm wondering if it's possible to achieve this functionality. While I am able to modify one div's content, can a single button selection lead to changes in content within 2 divs? Can a navigation button contain multiple URLs?
Thank you!