Menu
I have an application that has a <nav> selection list of items that will dynamically open in an <article> area. Each item is defined as a <div> in the <article> area with display:none, until each is activated by a JavaScript function as the user clicks selections in the <nav>. As they appear in the <article> area, they show up in the sequence they are defined in the <article>. The salient and somewhat pseudo parts of the code are shown below.
I would like each div to show up in the sequence that the user clicks, and not in the sequence the divs are laid out. So if the user selects item002 then item001, the respective divs would show in the sequence item002, item001.
I've been trying to find a way to do this with flex column layout by dynamically changing the order of the article divs, something like:
document.getElementById(shID).order = myOrdervar;
So far nothing I've tried has worked, and I can't find documentation on flex telling me if this is even possible. Does anyone have a technique for changing the display sequence of the article divs, with or without flex?
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font: 1em Helvetica;
background: #999999;
}
#main {
min-height: 500px;
margin: 0;
padding: 0;
display: flex;
flex-flow: column;
}
#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #dddd88;
height: 600px;
flex: 3 1 60%;
order: 2;
flex-flow: column;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
height: 600px;
flex: 1 6 20%;
order: 1;
overflow: auto;
}
header, footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
/* Too narrow to support three columns */
@media all and (max-width: 640px) {
#main, #page {
flex-direction: column;
}
#main > article, #main > nav, #main > aside {
/* Return them to document order */
order: 0;
flex-direction: column;
}
#main > nav, #main > aside, header, footer {
min-height: 50px;
max-height: 50px;
}
}
</style>
<script language="javascript" type="text/javascript">
var globalOrder = 1;
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID + '-show').style.display != 'none') {
document.getElementById(shID + '-show').style.display = 'none';
document.getElementById(shID).style.display = 'flex';
document.getElementById(shID).style.order = globalOrder;
globalOrder++;
}
else {
document.getElementById(shID + '-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
<style type="text/css">
/* This CSS is used for the Show/Hide functionality. */
.more {
display: none;
border-top: 0px solid #666;
border-bottom: 0px solid #666;
}
.showSquid {
display: block;
border-top: 0px solid #666;
border-bottom: 0px solid #666;
}
a.showLink, a.hideLink {
text-decoration: none;
font-size: 1.0em;
font-family: 'MergeLight', Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
padding-left: 0px;
border-top: 0px solid #666;
border-bottom: 0px dotted #36f;
}
a.hideLink {
background: transparent url(up.gif) no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
color: white;
}
</style>
</head>
<body>
<header>
Sources
</header>
<div id='main'>
<nav>
<a href='#' id='Wilmington Wind-show' class='showLink' onclick='showHide("Wilmington Wind");return false;'>
Wilmington Wind
</a><br>
<a href='#' id='ArtMachine.mp3-show' class='showLink' onclick='showHide("ArtMachine.mp3");return false;'>
Art Machine
</a><br>
<a href='#' id='Breathing-original.mp3-show' class='showLink' onclick='showHide("Breathing-original.mp3");return false;'>
Breathing
</a><br>
<a href='#' id='ToroidMachine-show' class='showLink' onclick='showHide("ToroidMachine");return false;'>
</a>
</nav>
<article>
<div id='Wilmington Wind' class='more' style="flex-direction: column;">
Wilmington Wind<br>
</div>
<div id='ArtMachine.mp3' class='more' style="flex-direction: column;">
Art Machine<br>
</div>
<div id='Breathing-original.mp3' class='more' style="flex-direction: column;">
Breathing
</div> <!-- Breathing-original.mp3 -->
</article>
<footer>© 2017</footer>
</div>
</body>
</html>
360
asked Dec 18 '25 06:12
The parent element needs display: flex; — in your case, that's the <article> element.
Add this in your <style> element:
article {
display: flex;
}
You miss the .style part in document.getElementById(shID).order=myOrdervar;:
document.getElementById(shID).style.order=myOrdervar;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
