If you have a list details block where you want to display many information and fields, here is a way to do it: use tabs (what else?) and split the list details block in 2, 3, 4 or more list details blocks.
This will allow to display a lot of information without having to play with too much verticality.
Here is a demo: https://test-play.softr.app/list-details-tabs
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
.button-group {
padding: 10px;
border: 0px solid #FFA500;
border-radius: 10px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
.button {
background-color: #FFFFFF;
color: #182939;
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 500;
padding: 15px 15px;
margin-right: 30px;
margin-left: 1px;
margin-top: 15px;
margin-bottom: 15px;
padding-top: 8px;
padding-bottom: 8px;
border-radius: 2px;
border: none;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.button:focus {
outline: none;
}
.button:hover {
background-color: #FFFFFF;
color: #FFA500;
border-bottom-color: #FFA500;
}
.button:active,
.active {
background-color: #FFFFFF;
color: #FFA500;
border: none;
border-bottom: 2px solid #FFA500;
outline: none;
}
@media (max-width: 760px) {
.button-group {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="button-group">
<button class="button active" onclick="runButton1Script()" title="All list details must have the same data source to avoid conflicts">Information group 1</button>
<button class="button" onclick="runButton2Script()">Information group 2</button>
<button class="button" onclick="runButton3Script()">Information group 3</button>
</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');
});
});
</script>
</body>
<script>
// hide blocks
window.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("list-details1").style.display = "block";
document.getElementById("list-details2").style.display = "none";
document.getElementById("list-details3").style.display = "none"
});
function runButton1Script() {
document.getElementById("list-details1").style.display = "block";
document.getElementById("list-details2").style.display = "none";
document.getElementById("list-details3").style.display = "none";
console.log("Button 1 clicked");
}
function runButton2Script() {
document.getElementById("list-details2").style.display = "block";
document.getElementById("list-details1").style.display = "none";
document.getElementById("list-details3").style.display = "none";
console.log("Button 2 clicked");
}
function runButton3Script() {
document.getElementById("list-details3").style.display = "block";
document.getElementById("list-details1").style.display = "none";
document.getElementById("list-details2").style.display = "none";
console.log("Button 3 clicked");
}
</script>
</html>
For the border effect on each list details, here is the code to be inserted in the header code of the page settings. You may need to adapt .css-mfstbn
with the right selector of your page
<style>
.css-mfstbn {
border: 1px solid #FFA500;
border-radius: 10px;
padding: 25px;
}
</style>