Question

I’m trying to put together a script that will generate markup that jQuery UI will accept to make an accordion, like below.

<div id="accordion">
    <h3>2012</h3>
    <div>
        <ul>
        <li><a href="somepage.html?year=2012&month=10">October</a></li>
        <li><a href="somepage.html?year=2012&month=9">September</a></li>
        <li><a href="somepage.html?year=2012&month=8">August</a></li>
        <li><a href="somepage.html?year=2012&month=7">July</a></li>
        <li><a href="somepage.html?year=2012&month=6">June</a></li>
        <li><a href="somepage.html?year=2012&month=5">May</a></li>
        <li><a href="somepage.html?year=2012&month=4">April</a></li>
        <li><a href="somepage.html?year=2012&month=3">March</a></li>
        <li><a href="somepage.html?year=2012&month=2">February</a></li>
        <li><a href="somepage.html?year=2012&month=1">January</a></li>
    </ul>
    </div>
    <h3>2011</h3>
    <div>
        <ul>
        <li><a href="somepage.html?year=2011&month=12>December</a></li>
        <li><a href="somepage.html?year=2011&month=11>November</a></li> 
        <li><a href="somepage.html?year=2011&month=10">October</a></li>
        <li><a href="somepage.html?year=2011&month=9">September</a></li>
        <li><a href="somepage.html?year=2011&month=8">August</a></li>
        <li><a href="somepage.html?year=2011&month=7">July</a></li>
        <li><a href="somepage.html?year=2011&month=6">June</a></li>
        <li><a href="somepage.html?year=2011&month=5">May</a></li>
        <li><a href="somepage.html?year=2011&month=4">April</a></li>
        <li><a href="somepage.html?year=2011&month=3">March</a></li>
        <li><a href="somepage.html?year=2011&month=2">February</a></li>
        <li><a href="somepage.html?year=2011&month=1">January</a></li>
    </ul>
    </div>
</div>

It should output the year and the current and past months all the way back to 2007. In order to create that type of markup, what would I need to do? Pseudo code:

var d = new Date();
var yr = Number(d.getFullYear());
for (var i = 2006, i < yr, i++)
{
  //create a H3, div, and a ul
  var mo = d.getMonth();
  //some other for loop on the month to create the li items
  //how to handle date display names?
}

Dates in jQuery/Javascript have always been an Achilles heel of mine.

Answer 1

is this what you want?? try DEMO : answer demo if yes, so you have to learn more to improve your logic 🙂 try to learn how jquery append() , accommodate to temporary variable, and the pattern of html