Question

Coolio, i am working on creating a simple tree that sits as a archive to articles. and i am using toggle to open close a the months to show what was written inside. brace yourself for the code its not pretty at all, but i cant use a tree plugin because i have to fit it to a jquery 1.3.2. but if you have a better way of writing the code i am all ears aswell 😀

here is my html:

div id="side_archive">
  <h4>Archives</h4>
  <ul>
    <li><a id="may12" href="#">May</a></li>
    <ul class="child" id="may">
      <li>Article 1</li>
      <li>Article 2</li>
      <li>Article 3</li>
    </ul>
    <li><a id="june12" href="#">June</a></li>
    <ul class="child" id="jun">
      <li>Article 4</li>
      <li>Article 5</li>
      <li>Article 6</li>
    </ul>
    <li><a id="july12" href="#">July</a></li>
    <li><a id="august12" href="#">August</a></li>
    <ul class="child" id="aug">
      <li>Article 7</li>
      <li>Article 8</li>
      <li>Article 9</li>
    </ul>
    <li><a id="september12" href="#">September</a></li>
    <ul class="child" id="sep">
      <li>Article 10</li>
      <li>Article 11</li>
      <li>Article 12</li>
    </ul>
    <li><a id="october12" href="#">October</a></li>
    <ul class="child" id="oct">
      <li>Article 13</li>
      <li>Article 14</li>
      <li>Article 15</li>
    </ul>
    <li><a id="november12" href="#">November</a></li>
    <ul class="child" id="nov">
      <li>Article 16</li>
      <li>Article 17</li>
      <li>Article 18</li>
    </ul>
    <li><a id="december12" href="#">December</a></li>
  </ul>
</div>

and the javascript:

 $(document).ready(function() {
 // basic tree function
 $('.child').hide();

 $('#january12').click(function() { $('#jan').toggle("slow")});
 $('#february12').click(function() { $('#feb').toggle("slow")});
 $('#march12').click(function() { $('#mar').toggle("slow")});
 $('#april12').click(function() { $('#apr').toggle("slow")});
 $('#may12').click(function() { $('#may').toggle("slow") });
 $('#june12').click(function() { $('#jun').toggle("slow")});
 $('#july12').click(function() { $('#jul').toggle("slow")});
 $('#august12').click(function() { $('#aug').toggle("slow")});
 $('#september12').click(function() { $('#sept').toggle("slow")});
 $('#october12').click(function() { $('#oct').toggle("slow")});
 $('#november12').click(function() { $('#nov').toggle("slow")});
 $('#december12').click(function() { $('#dec').toggle("slow")});

});

now here is the wierd thing the list sits half way down the page and whenever you click on the month to the screen refreshes and you end up at the top of the page. is there a way of getting that functionality so that it doest throw you around..

well thanks in advance for any help 😀

Answer 1

It sounds to me like you need to prevent the default action of the href=”#” of each item.

To do this using jQuery you can write:

$("#example").click(function(e) {

  e.preventDefault(); 

  //Add your code here

});

I have got my code laid out like this to show the basic idea, perhaps an alternative to the way you have laid out your code could be:

$(a).click(function(e) {
  e.preventDefault(); 

 switch ($(this).attr("id")) {
   case "january12":
     $('#jan').toggle("slow");
     break;
   case "february12":
     $('#feb').toggle("slow");
     break;
 }

});

You could continue using the switch statement to show and hide different div’s