Skip to content

Instantly share code, notes, and snippets.

@thecarlhall

thecarlhall/focus_flex_columns.html

Created March 25, 2023 16:06
Show Gist options
  • Save thecarlhall/37269fdfd63e1960d4847ca6014f944d to your computer and use it in GitHub Desktop.
Save thecarlhall/37269fdfd63e1960d4847ca6014f944d to your computer and use it in GitHub Desktop.
Download ZIP
Minimum html+css+javascript to have flex columns that will toggle focus on a selected column
Raw
focus_flex_columns.html
<html>
<body>
<style>
.row {
display: flex;
}
.column {
flex-grow: 1;
border: 1px dashed black;
padding: 10px;
}
</style>
<script language="javascript">
function toggle(sltr) {
const div = document.querySelector(`.column${sltr}`);
if (div.style['display'] == 'block') {
document.querySelectorAll('.column')
.forEach(el => el.style.removeProperty('display'));
} else {
div.style.setProperty('display', 'block');
document.querySelectorAll(`.column:not(${sltr})`)
.forEach(el => el.style['display'] = 'none');
}
}
</script>
<div class="row">
<div class="column first"><a href="#" onclick="javascript:toggle('.first')">First Column</a></div>
<div class="column second"><a href="#" onclick="javascript:toggle('.second')">Second Column</a></div>
<div class="column third"><a href="#" onclick="javascript:toggle('.third')">Third Column</a></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment