Bismillah, Alhamdulillah

Skip to Content

Table of contents and Accordion for Blogger

May 15th, 2010

Allahmdulillah, Alhamdulillah, Alhamdulillah
Usually we have so many posts in our blog and if we used TOC it will be very long. If we have very long TOC, it make visitors difficult to read our posts. To make it easy to read I made modification from previous script Table of Contents for Blogger new style and I used Accordion.
Feature of this script :

  1. Accordion effect
  2. Show and hide effect
  3. CSS 3
  4. Automatic add jquery
  5. Different color for content
  6. Different style for open and close
  7. Auto Sort the title
  8. Add New!! for 10 newest entry

How to use is very easy. Create Static Page .
Put the script in Html mode

<link href="" media="screen" rel="stylesheet" type="text/css"></link>
<script src=""></script>
<script src=""></script>
<script type="text/javascript">
var accToc=true;
<script src="" type="text/javascript"></script>

Replace with your blog name


Below images are how to create page in blogger.

Categories: Blogger Tricks, Table of contents

Tags: ,

Abu Farhan

I'm an Owner of this blog and it's always been a passion of mine to write about Blogger. I like to make original script for blogger. I also run the awesome Website at The Best Lists.

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or Comments RSS Feed

Donate towards my web hosting bill!

Leave a response

186 Responses to “Table of contents and Accordion for Blogger”

  1. adig says:

    nice & it works well.. thanks..

  2. assalamu alaykum
    dear brother
    you are great
    and great thank you
    MASHAALLAH your website
    i lots of pray for you

    inmy blog i will put your this website link
    thannk you

  3. Sezer says:

    Salam aleikum.
    If there is jQuery in your blog, then it won’t work right. Try jQuery to not work in your “table of contents” page only.

  4. jejaktamboen says:

    Mas Abu,.kenapa efek buka tutupnya tidak bisa berjalan di blog saya?
    mohon penjelasannya.
    ditunggu New Script berkelas lainnya

  5. Tamboen says:

    Nice TOC,
    i’ll try it on my blog & i’ll wait for the new TOC from this website, :)

  6. Tamboen says:

    Nice TOC,
    i’ll try it on my blog & i’ll wait for the new TOC from this site, :)

  7. sebin says:

    It doesn’t showing any accordion effect in my blogger blog. Please see this page- . Please help me..

  8. […] Every once in a while we choose blogs that we read….

    What if you click my link…

  9. Auto Coding says:

    bang ane modif sedikit boleh kan???

  10. Muhammad says:

    Sir i wanna know ho to limit the Tags in the index so i may update all the index again.i am facing issues regarding is created but no list is displayed due to many tags.please create new TOC with changing and have setting to limit the tag.please also reply me on my e-mail.
    waiting for your feedback..
    Thanks in advance

  11. xdisciple says:

    Abu, this is amazing, thank you very much, it’s exactly what I was looking for… please respond to my comment on the Awesome Automatic Slider part 1… thanks again…

  12. sebin says:

    I added this code to my static page. But it doesn’t show any accordion effect. Pls see this page –

  13. deepak says:

    How to increase the no. of posts in only shows 1000 posts…how to show posts more than 1000+
    plz help me…

  14. Harry says:

    Mas, saya suka nih dengan yang satu ini dan saya udah pake dari dulu di blog saya yang lama dan dipake lagi di blog saya yang baru. Tapi saya ada pertanyaan mas, kenapa ya terkadang effect accordionnya tuh work kadang-kadang engga, apa punya solusinya mas?

    Terima kasih sebelumnya!

  15. Contact scanners are those that has to be placed near the object to have a successful scanning….

    Contact scanners are those that has to be placed near the object to have a successful scanning. Those that can scan as far as 3 feet or more are laser scanners.Most scanners also come with a software that would allow you to see a graphical user interfa…

  16. F. says:

    Hello. Is there a way to make it work so that posts are organized by date? Also, the Accordion effect isn’t working for me. :(

  17. assalamu alikum brother!
    thanks for this widget, i used it and found great… actually i am using it for Urdu material, that is the language spoken in Indo-Pak. i want to add some font which help the visiters read the blog easily, how to do it?
    its here..

  18. jason says:

    hi i always go here to your site and checking if there is a new way make a blogger blog to make easy .. found this one and using it to my site.. make it beautiful. and make look professional now.. thank you.. reciprocate comment ehre …

  19. Faiz says:

    Asslm.Wr.Wb. Sitemap yang bagus Akhi, Ana mau nanya kira-kira gimana ya caranya supaya judul postingan yang panjang ga keluar dari tabel sitemapnya? Syukran Akhi. Salam Kenal.

  20. Neha says:

    Loved it. Thanks. I have placed it in my sidebar. But all items are getting displayed rather than being hidden inside those labels.

    Have a look at my site to check:

  21. Rahul says:

    How Create separate lable Table of contents

  22. always10list says:

    Great help abu, I already used it in my always10 – top 10 list blog and it works. check it out.

    I’m just wondering if it affects on my site loading speed. does it?

  23. Lionel says:

    It does not work on my wordpress, blog you have any tips for the Serto it.

  24. Gaptek says:

    Terimakasih banyak.. kereeen neh.

    Harus lewat Page ya tidak bisa lewat post biasa ??

  25. Hairul says:

    Trimakasih… sudah ane pasang diblog ane.. semoga blog ini lebih maju… ijin sebagai referensi artikel di blog ane..

  26. Money Koin says:

    tampilannya OK sekali, telah saya aplikasikan di blog sederhana saya. Tq!

  27. ARMAN BLOG says:

    Warna putih pada baris isi label bisa di hilangkan tidak sob?? karena tulisan pada template saya berwarna putih jadi tidak kelihatan…mohon balasannya sob, saya ingin menggunakan script ini di blog saya sob

  28. Salam.

    I just wondering if you could make table of content by labels.

    I mean, make it just for one or more label on each post. Cause i have too much post per label, so its take a time to load all content.

    Your help i really appreciate.

  29. FixarFarsan says:

    Is it possible to open each link in the TOC in a new windows or tab?

    Also, is it possible to modify the colors?

  30. Must says:

    Thanks Abufarhan. It’s works great. :)

  31. taufik says:

    as-salamu’alaikum warahmatullahi wabarakatuh

    abu bagaimana cara nya agar label tidak tercantum di table of counten nya .

    jadi saya ingin membuat 2 table of counten nya .

    gimana tuh cara nya

    tolong di bles yh

  32. Aamir says:

    Assalam O Alaikum
    Dear Brother,
    I have used your widget on my blog to show all posts on a page, nice but there is a problem it is showing only posts till ” T ” ,, it is not displaying catagories of ” U , V , W , X , Y and Z ” ,,
    why its not showing all labels
    please help me to solve this problem
    Allah Hafiz

  33. lootfile says:

    brother very nice plugin ..

    i have problem ..
    see this page :

    i have many type of levels ..

    is there any way to arrange levels with own choice .. place ..

    If i want to remove some categories .. ..

    how to remove .. plz help ..ok

  34. سمير says:

    اريد جعلها تعرض الارشيف حسب التصنيف عمودي وليس افقيا
    اي كل تصنيف في عمود

  35. I’m Planning to create a TOC some sort of list for the most numbered contributors for my Always10 blog. I check and apply it to my blog and it did work but does it takes too long to load? I mean, does these can affect site load much? what are your recommendation? should I apply it or not?

  36. deepak says:

    this code is limited only for 1000 posts…….how to increase it??plz reply

  37. Abid khan says:

    Thankx for sitemap especially with this nyc effect.. it work nyc on my blog

  38. Azqia says:

    HI farhan, why its not work on my site.
    Please check it.

  39. Hasbi says:

    Bismillah, Syukran wa jazaakumullaaoh, for your tutorial akhi, very helpful . how to alter / use table of contents on the post as a template Accordion?

  40. How to make your “Enjoyed this post” widget above that has a background that was aligned on the whole width of the main blog post. ? Because when i add background on my blog, it is aligning on the margin of the text.

  41. chris says:


    I like your TOC and it works great in my site but I have one thing that I would like to change if only possible and I hope you can help me. My site background is in dark color (black) and the colors of the links are in orange… in the TOC you made the background of every link appears to be alternate black and white. I would to turn the white color into black if possible. Would you help me? Here is my site link for you to look at As you can see the orange colored links are not visible to white background that is why I would like to change it to black. Thanks and hope to hear from you soon.

  42. i Like your comment box. Can you teach me how to use this ? And i love your template, its like psd tuts plus

  43. Nana says:

    Hi Farhan,is there anyway to change New! to latest instead?And how to hide widget links?Appreciate if you could reply.Thank you

  44. Shin Kwak says:

    I always find my promo codes from kingofcodes.weebly. It’s the only site where I can get legitamite codes from.

  45. rafeyu says:

    Thanks I like it. hehe

    terimakasih. :)

  46. […] classic cars auto used used auto we buy any car cheap cars […]

  47. Horier says:

    before, i have try a trick “table contents of blogger new style” but this one more look very nice..i will change my sitemap with this

    thanks . .

Leave a Reply

nine + five =

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen