Hello everyone, I spent my weekend on a bug and it annoys me, I call on your writing skills 
I’m looking to do something simple, in a list-details type page, display text and image content from the airtable content of the record.
Why ? Because I have a lot of data to display and I can’t settle for softr fields, so I found a UX with these small clickable panes. It’s going to work pretty well I think but I can’t display my content.
I found these examples: @dcoletta’s post and this post.
Here is a simple GIF showing the UX and the needs, that you can check under this link
Thank you very much, I’ll buy you a beer when you go to France 
Here is the code currently used in the custom code block
<html>
<body>
<div class="tab">
<button class="tablinks" onclick="printCrablyUrl()"><i class="fas fa-print"></i> Print menu</button>
<button class="tablinks" onclick="openCity(event, 'QR')"><i class="fas fa-qrcode"></i> Flashcode menu</button>
<button class="tablinks" onclick="openCity(event, 'Plan')" id="defaultOpen"><i class="fa-solid fa-layer-group"></i> Menu text</button>
<button class="tablinks" onclick="openCity(event, 'Papier');displayA43()"><i class="fa-solid fa-file-lines"></i> Preview menu</button>
</div>
<div id="QR" class="tabcontent">
<p> here I want to display <b>an image from an attachement</b> field named `QRcodemenu`into my airtable base. I tried different script but without success. The purpose is simply to display an image. </p>
</div>
<div id="Plan" class="tabcontent">
<p> here I want to display the text from a <b>rich text field</b> named `themenutext`into my airtable base. I tried different script but without success, the purpose is only to fill my page with some text. </p>
</div>
<div id="Papier" class="tabcontent">
<iframe src="" id="iframeA4" width="100%" height="500px" style="display: none"; allowfullscreen =""></iframe>
</div>
</body>
<style>
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 13px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
<script>
// get the recordid
var recordId = getUrlParam('recordId');
function getUrlParam(name) {
var url = new URL(window.location.href);
let param;
for (var key of url.searchParams.keys()) {
if (key.toLowerCase() === name.toLowerCase()) {
param = url.searchParams.get(name);
break;
}
}
if (!param && name.toLowerCase() === 'recordid') {
param = getRecordIdFromPath();
}
return param;
}
function getRecordIdFromPath() {
let pathName = window.location.pathname;
if (pathName.indexOf('/r/rec') !== -1) {
pathName = pathName.substr(pathName.indexOf('/r/rec') + 3);
if (pathName.indexOf("/") !== -1) {
pathName = pathName(0, pathName.indexOf('/'))
}
return pathName;
}
return undefined;
}
// display iframe with menu
function displayA43()
{
var string = window.records[recordId].record.fields['pdf'];
var urlPDF = string.match(/\(([^)]+)\)/)[1];
var iframeA4 = document.getElementById("iframeA4");
document.getElementById('iframeA4').src = urlPDF + "#toolbar=0&view=FitH";
iframeA4.style.display = "block";
}
// print the menu
function printCrablyUrl() {
var string = window.records[recordId].record.fields['pdf'];
var urlPDF = string.match(/\(([^)]+)\)/)[1];
printJS(urlPDF);
}
// window switch
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</html>
