There are two sections with different ids - the first is id="nature" and the second section is id="birdy". Both sections contain a carousel, but I have kept one section hidden.
https://i.sstatic.net/QKDW1.png
A jQuery code has been applied to replace sections on click. When the bird button is clicked, the second section is successfully replaced by the first section.
However, when attempting to click back on the nature button, nothing happens. The desired functionality is for the page to show the first section (id="nature") again upon clicking the nature button while on the second section (id="birdy").
Please provide assistance!
HTML:
<section id="nature">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
(content omitted)
</div>
</section>
<section id="birdy">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
(content omitted)
</div>
</section>
<!-- button -->
<div class="container ntr-btn">
<a href="#" class="btn btn-primary btn-lg">NATURE</a>
</div>
<div class="container bird-btn">
<a href="#" class="btn btn-primary btn-lg">Birds</a>
</div>
CSS:
#birdy {
display: none;
}
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.bird-btn').click(function (e) {
/* Act on the event */
$('#birdy').css('display', 'initial');
$('#nature').replaceWith('<section id="birdy"></section>');
});
$('.ntr-btn').click(function (e) {
/* Act on the event */
$('#birdy').css('display', 'none');
$('#birdy').replaceWith('<section id="nature"></section>');
});
});
</script>