Apologies for taking so long to reply, but I think I made some progress but I cant really tell. Putting the code into Markdown and changing the id's and "#links" for the buttons to what im using seemed to do something briefly but when I preview the page and start clicking buttons nothing happens. I see the URL at the top change to #reel when I click the "Reel" button but nothing on the page itself changes.
Here is the code I have in the markdown block. Am I missing anything?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Reel
$('.button-block a[href="#reel"]').click(function(){
$("#block-4247f19621f2ce6bbb76").addClass("show");
$('div:not(#block-4247f19621f2ce6bbb76)').removeClass('show');
}
);
// Short Film
$('.button-block a[href="#short"]').click(function(){
$("#block-49d59487b7438920f05c").addClass("show");
$('div:not(#block-49d59487b7438920f05c)').removeClass('show');
}
);
// About
$('.button-block a[href="#about"]').click(function(){
$("#block-yui_3_17_2_1_1709842666925_3165").addClass("show");
$('div:not(#block-yui_3_17_2_1_1709842666925_3165)').removeClass('show');
}
);
});
</script>
<style>
#block-4247f19621f2ce6bbb76, #block-49d59487b7438920f05c, #block-yui_3_17_2_1_1709842666925_3165,{
opacity: 0;
transition: all 0.1s ease;
}
.show {
opacity: 1 !important;
transition: all 0.1s ease;
}
</style>