Dynamically order collapsibles content based on current date-CodePudding

I display seasonal weather/agriculture data using collapsible sections. Currently I rearrange the order of the collapsible content manually based on the time of the season.

The 3 sections are Agriculture(soil temperatures and moisture), Freeze Dates, and Snowfall.

From March thru August the order is Ag, Freeze, Snow. From September thru November order is Freeze, Snow, Ag. Else order is Snow, Freeze, Ag

I am trying to figure out if there is a way to dynamically arrange the sections on loading the page based on today's date. I prefer to stick with vanilla JavaScript if possible.

Something like this:

function loadOrder() {
  var today = new Date();
  var month = today.getMonth()   1;
  // comparw dates and load content in order
  if (month >= 3 && month < 9) {
    //load order
    load Agriculture content
    load Freeze content
    load Snow content
  } else if (month >= 10 && month < 12) {
    load Freeze content
    load Snow content
    load Agriculture content
  } else {
    load Snow content
    load Freeze content
    load Agriculture content
  };
}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

<body onl oad="loadOrder()">
  <h2>Seasonal information presented. </h2>
  <button >Agriculture</button>
  <div >
    <p>Data on soil temperatures, moisture and leaf wetness</p>
    <span><?php //include 'get_soilsample.php'; ?></span>
  </div>
  <button >Freeze Dates</button>
  <div >
    <p>Data table on Frost and Freeze dates and temperatures</p>
    <span><?php //include 'get_freeze.php'; ?></span>
  </div>
  <button >Snowfall</button>
  <div >
    <p>Current and past snowfall information</p>
    <span><?php //include 'get_snowfall.php'; ?></span>
  </div>
</body>

Any help or direction would be appreciated

CodePudding user response：

Complete code below:

I have restructured the HTML so that we can take advantage of display:flex and name the containers and placed them in a parent container.

    <h2>Seasonal information presented.</h2>
    <div id="container">
      <div id="container_Agriculture">
        <button >Agriculture</button>
        <div >
          <p>Data on soil temperatures, moisture and leaf wetness</p>
          <span>
            <!--?php //include 'get_soilsample.php'; ?-->
          </span>
        </div>
      </div>
      <div id="container_FreezeDates">
        <button >Freeze Dates</button>
        <div >
          <p>Data table on Frost and Freeze dates and temperatures</p>
          <span>
            <!--?php //include 'get_freeze.php'; ?-->
          </span>
        </div>
      </div>
      <div id="container_Snowfall">
        <button >Snowfall</button>
        <div >
          <p>Current and past snowfall information</p>
          <span>
            <!--?php //include 'get_snowfall.php'; ?-->
          </span>
        </div>
      </div>
    </div>

By using display:flex we can order the container on-the-fly using CSS classes.

#container  { display: flex; flex-direction: column; }
.first      { order: 1; }
.second     { order: 2; }
.third      { order: 3; }

And finally the JavaScript to check the month and apply the correct classes.

function loadOrder()
{
    var today = new Date();
    var month = today.getMonth()   1;
    // comparw dates and load content in order
    if (month >= 3 && month < 9) {
        document.querySelector("#container_Agriculture").classList.add("first");
        document.querySelector("#container_FreezeDates").classList.add("second");
        document.querySelector("#container_Snowfall").classList.add("third");
    } else if (month >= 10 && month < 12) {
        document.querySelector("#container_FreezeDates").classList.add("first");
        document.querySelector("#container_Snowfall").classList.add("second");
        document.querySelector("#container_Agriculture").classList.add("third");
    } else {
        document.querySelector("#container_Snowfall").classList.add("first");
        document.querySelector("#container_FreezeDates").classList.add("second");
        document.querySelector("#container_Agriculture").classList.add("third");
    };
}