blogger-archiv with mootools accordion

A practise I've done with my sidebar-archiv here on the right using core and more.

the template-code

First of all the definition of my blogger-sidebar-widget "Archiv" inside my blogger-template. note: the gadget should be defined as

• hirarchy
• show post-titles
• and monthly (in the Gadget-Prefs)

  


s

the css

Some lines of CSS for styling. note: I've no need to show the archiv-title, so I set it to: display:none [line 01-03]

#sidebar h2 {
display: none;
} 

.BlogArchive #ArchiveList ul li {
margin: 0;
padding: 0;
text-indent: 0;
}

.BlogArchive #ArchiveList ul.posts li,
.BlogArchive #ArchiveList ul ul li {
padding-left: 0;
}

#sidebar li {
margin-left: 0;
list-style-type: none;
}

#sidebar a.ytoggle {
padding: 3px 0px 5px 8px;
font: bold 145% Georgia, "Times New Roman", Times, serif;
display: block;
}

#sidebar ul.ycontent {
margin-bottom: 1px;
}

#sidebar a.mtoggle {
padding: 3px 0px 3px 8px;
font: normal 115% Georgia, "Times New Roman", Times, serif;
display: block;
}

#sidebar ul.mcontent {
margin-bottom: 1px;
background-color: #eef3a8;
}

#sidebar ul.mcontent a {
padding: 3px 3px 3px 10px;
display: block;
}

#sidebar ul.mcontent a:hover {
background-color: #fafed6;
}

s

preparing the elements

After the domready-Event get the Blog-archiv-Element, 'BlogArchive1_ArchiveList' in my case [line 01]. Then start preparing for the accordion [02]. I don't need the blogger-default-togglers, no counts and removed the blogger-default-states [06-08].

var blogArchiv = $('BlogArchive1_ArchiveList');
buildArchiv(); // start preparing for accordion

var buildArchiv = function () {
 var menus = blogArchiv.getElements('li a.post-count-link');
 blogArchiv.getElements('a.toggle').dispose();
 blogArchiv.getElements('span.post-count').dispose();
 blogArchiv.getElements('li.archivedate').removeClass('collapsed').removeClass('expanded');
 $each(menus, function (menu) {
  var inhalt = menu.getParent('ul');
  menu.inject(inhalt, 'before');
 });

 var yeartoggler = blogArchiv.getChildren('a.post-count-link').addClass('ytoggle roundedT5');
 var yearcontent = blogArchiv.getChildren('ul.hierarchy').addClass('ycontent');
 buildAccordion(yeartoggler, yearcontent);
 
 $each(yearcontent, function (year) {
  var monthtoggler = year.getElements('a.post-count-link').addClass('mtoggle');
  var monthcontent = year.getElements('ul.hierarchy').addClass('mcontent');
  buildAccordion(monthtoggler, monthcontent);
 });
};

the accordion

I'm using the standard Accordion-Class from mootools-more here, and gave it 'mouseenter' as trigger-event [10].

var buildAccordion = function (toggler, elements) {
  var accordion = new Fx.Accordion(toggler, elements, {
   display: 0,
   show: 0,
   duration: 500,
   opacity: true,
   transition: Fx.Transitions.Quart.easeOut,
   // I wanted my accordion to react on 'mouseenter'
   // the default trigger is 'click'
   trigger: 'mouseenter'
  });
 }

the complete code

// the domready-function once the content is loaded
window.addEvent('domready',function() {
 var blogArchiv = $('BlogArchive1_ArchiveList');
 buildArchiv(); // start preparing for accordion
 
 var buildArchiv = function () {
  var years = blogArchiv.getElements('li a.post-count-link');
  blogArchiv.getElements('a.toggle').dispose();
  blogArchiv.getElements('span.post-count').dispose(); 
  blogArchiv.getElements('li.archivedate').removeClass('collapsed').removeClass('expanded');
  
  $each(years, function (year) {
   var elements = year.getParent('ul');
   year.inject(elements, 'before');
  });
  
  // getting the year and adding CSS-Classes
  var yeartoggler = blogArchiv.getChildren('a.post-count-link').addClass('ytoggle roundedT5');
  var yearcontent = blogArchiv.getChildren('ul.hierarchy').addClass('ycontent');
  buildAccordion(yeartoggler, yearcontent);
  
  // same with months
  $each(yearcontent, function (year) {
   var monthtoggler = year.getElements('a.post-count-link').addClass('mtoggle');
   var monthcontent = year.getElements('ul.hierarchy').addClass('mcontent');
   buildAccordion(monthtoggler, monthcontent);
  });
 }
 
 var buildAccordion = function (toggler, elements) {
  var accordion = new Fx.Accordion(toggler, elements, {
   display: 0,
   show: 0,
   duration: 500,
   opacity: true,
   transition: Fx.Transitions.Quart.easeOut,
   // I wanted my accordion to react on 'mouseenter'
   // the default trigger is 'click'
   trigger: 'mouseenter'
  });
 }
}); // end domready

s

requires: core more