Blog Archive links Collapsed by Default Hack

blog archive widget hack

If you are using the Hierarchy style for your Blog Archive widget then you must have faced the problem of auto expansion of drop-down list of a particular month which is currently in the calendar or to which the opened post belongs. This simple hack solves that problem by making all the nodes in the hierarchy to be collapsed by default(As seen in the above picture ). This can be simply added by the One Click Installer or manually.

Demo


Prerequisites for this to Work
Before you apply this remember that you have to have a Blog Archive Widget present and the Style has to be set to Hierarchy (as shown in picture below )

blog archive widget config blogger


Applying this to your Blog

To add using One Click Installer Method



Or just add the following Code in your Blog (preferably before the </body> tag in the Edit HTML of the Template tab )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>  
if ( $('.archivedate').hasClass('expanded') ) 
{ 
 $('.archivedate').removeClass('expanded'); 
$('.archivedate').addClass('collapsed'); 
}
</script>


What this code does
It firstly checks if a element having class name "archivedate" also has a class "expanded" present in it. If this turns out to be true then it removes the "expanded" class and adds a class named "collapsed" .

If you face any problem implementing it in your blog then feel free to ask via comments

Written by Prayag Verma


A blogger and Web Developer currently in college learning about computers. A CSS Lover , Blogger Template Designer and Music Addict ! Get more from Prayag on and Twitter




Want to get these Updates straight to your Inbox , Then Subscribe !




Related Articles


Icah Banjarmasin said...

Prayag..you are master of tutorial..really I like it.

lautansyair said...

Usefull tips. i'll aply to my blog.

Icahbanjarmasin said...

Tank you very much my friend.

Experiment BL626 said...

Thank you! This was way easier to install than the other code (http://sedatkurtulus.blogspot.com/2010/05/keep-archive-hierarchy-collapsed-on.html).

Mike said...

Hey Prayag! Works great, thanks! The only thing I noticed is that the little triangle button (that signifies collapsed or not) stays "expanded", is there any way to fix this? Not a big deal though!

Akshay Makadiya said...

Bro This is working very well but I would Like to informs you that it Reduced my Traffic. hence It is not good for blogger. This my experience.
Sorry Bro.

Asim Nawaz said...

Thanks for this hack!
Will this hack work on wordpress if I use archive there too ?

nicoyuey said...

Thanks for this code. Worked great on my mobile/desktop website.
http://calcunico.blogspot.com

Keep sharing. Great work

Erin Herøin said...

THANK YOU! Your technique is the easiest and most useful one!

Rebecca Carmen said...

Is there a code to delete the bullet points from it?

Natalie Uy said...

is there a way to edit the little arrowheads? I moved mine to a static page but the arrowheads are gone now

http://chefuy.blogspot.com/p/archive.html
Thanks!

Obet Tea said...

I finally found the easiest way here and working very well on my blog.

http://super-gratisan.blogspot.com
Thank you very much

FlakPz said...

Thank you so much, this helps make my blog archive look less messy and more organized!

Tranquil said...

WOW! Thanks man! Worked like a charm!

Ganesh H said...

How can I do the expand all (Year and month). in archive?