I updated the blcok IDs, but not sure what the CTA IDs are? the âcta3â? Thatâs my code:
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
.button-group {
display: flex;
justify-content: center;
}
.button {
background-color: #2B5472;
color: white;
font-family: 'Inter', sans-serif;
font-size: 22px;
padding: 10px 20px;
margin-right: 30px;
padding-top: 8px;
padding-bottom: 8px;
border-radius: 14px;
border: none;
cursor: pointer;
}
.button:hover {
background-color: #CFE6D0;
color: #ffffff;
}
.button:focus {
outline: none;
}
.button:active, .active {
background-color: #36B37E;
color: #ffffff;
outline: none;
}
@media (max-width: 480px) {
.button-group {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.button {
display: none;
}
.dropdown {
display: block;
width: 100%;
margin-top: 10px;
padding: 14px 16px;
border-radius: 12px;
border: none;
background-color: #36B37E;
color: white;
font-family: 'Inter', sans-serif;
font-size: 18px;
cursor: pointer;
}
}
@media (min-width: 481px) {
.button-group {
display: flex;
justify-content: center;
}
.dropdown {
display: none;
}
}
</style>
</head>
<body>
<div class="button-group">
<button class="button active" onclick="runButton1Script()">All Jobs</button>
<button class="button" onclick="runButton2Script()">Matching Jobs</button>
<button class="button" onclick="runButton3Script()">My Applications</button>
<button class="button" onclick="runButton4Script()">Sent Applications</button>
<select class="dropdown" onchange="runDropdownScript(this.value)">
<option value="button1">All Jobs</option>
<option value="button2">Matching Jobs</option>
<option value="button3">My Applications</option>
<option value="button4">Sent Applications</option>
</select>
</div>
<script>
const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {
button.addEventListener('click', function() {
buttons.forEach(b => b.classList.remove('active'));
this.classList.add('active');
});
});
function runDropdownScript(value) {
switch(value) {
case 'button1':
runButton1Script();
break;
case 'button2':
runButton2Script();
break;
case 'button3':
runButton3Script();
break;
case 'button4':
runButton4Script();
break;
default:
break;
}
}
</script>
</body>
</html>
<script>
function getURLParameter(name) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(name);
}
window.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("table2").style.display = "block";
document.getElementById("form2").style.display = "none";
document.getElementById("chart2").style.display = "none";
document.getElementById("list2").style.display = "none";
const tabParam = getURLParameter('tab');
if (tabParam) {
if (tabParam === 'table') {
document.getElementById("table2").style.display = "block";
document.getElementById("form2").style.display = "none";
document.getElementById("chart2").style.display = "none";
document.getElementById("list2").style.display = "none";
} else if (tabParam === 'form') {
document.getElementById("form2").style.display = "block";
document.getElementById("table2").style.display = "none";
document.getElementById("chart2").style.display = "none";
document.getElementById("list2").style.display = "none";
} else if (tabParam === 'chart') {
document.getElementById("chart2").style.display = "block";
document.getElementById("form2").style.display = "none";
document.getElementById("table2").style.display = "none";
document.getElementById("list2").style.display = "none";
} else if (tabParam === 'list') {
document.getElementById("list2").style.display = "block";
document.getElementById("form2").style.display = "none";
document.getElementById("table2").style.display = "none";
document.getElementById("chart2").style.display = "none";
}
}
});
window.addEventListener('block-loaded-cta3', () => {
console.log('CTA Block loaded');
const buttonClickHandler = (e) => {
const button = e.target.closest('#cta3 a[data-element="button"]:nth-child(1)');
if (button) {
e.preventDefault();
document.getElementById("table2").style.display = "block";
document.getElementById("form2").style.display = "none";
document.getElementById("chart2").style.display = "none";
document.getElementById("list2").style.display = "none";
history.pushState(null, null, '?tab=table');
}
const button2 = e.target.closest('#cta3 a[data-element="button"]:nth-child(2)');
if (button2) {
e.preventDefault();
document.getElementById("form2").style.display = "block";
document.getElementById("table2").style.display = "none";
document.getElementById("chart2").style.display = "none";
document.getElementById("list2").style.display = "none";
history.pushState(null, null, '?tab=form');
}
const button3 = e.target.closest('#cta3 a[data-element="button"]:nth-child(3)');
if (button3) {
e.preventDefault();
document.getElementById("chart2").style.display = "block";
document.getElementById("form2").style.display = "none";
document.getElementById("table2").style.display = "none";
document.getElementById("list2").style.display = "none";
history.pushState(null, null, '?tab=chart');
}
const button4 = e.target.closest('#cta3 a[data-element="button"]:nth-child(4)');
if (button4) {
e.preventDefault();
document.getElementById("chart2").style.display = "none";
document.getElementById("form2").style.display = "none";
document.getElementById("table2").style.display = "none";
document.getElementById("list2").style.display = "block";
history.pushState(null, null, '?tab=list');
};
document.body.addEventListener('click', buttonClickHandler);
});
</script>```