Expand/Collapse Sidebar Widget Title
Hi Annie
First I want to thank you for all this info. I spent about three days wondering how to expand/collapse my labels before I stumbled on your blog.
I have a slight problem though.
When I use the title part of the page element, I get a nice big title but it's not collapsable. If I use your code, the collapsable link appears in small text and isn't very visible.
I've put the examples up on my blog - which is at ReviewInk on blogspot.com
The first is your label code.
As you can see, the part entitled "Look at me, I'm collapsable" isn't in fact collapsable.
The collapsable link is actually the one underneath it that reads "Reviews By Author - small collapsable link.
The other part is the regular label listing under "Reviews - By Author" which is what I'd like the collapsable menu to look like.
Hopefully this is making some kind of sense, and I'd be really grateful for your help.
Thanks so much!
Amy
If I'm understanding correctly, you want a +/- sidebar title like my Blogging Tools area in my sidebar.
Each of the five titles marked +/- will expand a list of links. Note - to make it easier, do not expand the widgets templates. Scroll down to your sidebar wrapper. This is how mine looks:
Find the CSS style sheet. You will place the following code between the <b:section>and the </b:section>:
<b:widget id='LinkListXX' locked='false' title='+/- YOUR TITLE' type='LinkList'>Changes to the above code:
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;">');
//]]>
</script>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
- XX - the linklists are assigned a unique number. So, if you try to save your template and it says something about two widgets having Linklist3, change the number on one widget.
- +/- YOUR TITLE - Add the title of your sidebar widget here. You can leave the +/- if you want. It has become the universal symbol for Click here to see more.
EDIT: I have had this hack in my template for so long, I forgot to say you need follow Steps 1 & 2 in this post: Hide/Show, Expand/Collapse - navigation element. Those steps are:
First you must enter the following code in your style sheet:
.commenthidden {display:none}Second put this between the <head> and </head> tags, but not in the style sheet:
.commentshown {display:inline}
<script type="text/Javascript">I'm so sorry, Amy. I hope this clears up your problem!
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
Labels:
Blogger Beta,
Design,
Expand/Collapse,
Sidebars
34 Comments:
Hi again Annie.
Thanks so much for your quick response. Unfortunately I think I've done something stupid despite your very clear instructions. I'm not getting the +/- to show at all, and the title isn't expandable.
I hope you don't mind sparing some time to give some help to a complete blogging dunce.
Thanks :)
Amy
@Amy, I edited the post to correct the problem. I'm so sorry for omitting this part!
Hi Annie
I may have posted this before but since it didn't show up on the page I'm guessing that you haven't got round to it or something went wrong in my submission.
Anyway, I had already put in the parts from steps 1 and 2 (just double-checked them now). And I still have the same problem :(
Looking forward to hearing from you.
Amy
@Amy, now I'm baffled. I will have to check and see what the problem is, but I work 12 hour days this week, so it won't be tell later in the week before I can really look at it.
Dear annie
I really wanted to make a expandable sidebar like yours before some weeks. But since i am new in blogging, i wasn't able to make a sidebar like urs. But i got a help from a site. Now i have sidebar which is expandable in my blog and i did it from the help of flooble.com
i always appreciate ur post n keep doing grt lik this always. Thanks
-rabin
Annie, I got this to work! It's a great hack.
---I was wondering if it is possible to do this but with an HTML page element?
This is very simple and easy.I never thought that this things can be done with a simple code like this.
Wow, great hacks, I just applied them on my blogs :) Thank You :*
Love the collapsable areas. They help take up less realistate and shouldn't hurt you in the SERPs.
Hi again Annie.
Just to let you know that I've been through my code again and can't work out what would be blocking it from working correctly.
I guess I'll keep digging but hopefully you'll have some time to take another look.
Thanks!
Amy
thanks annie for teh help. managed to get it done in an hour =x
**i have poor understanding capability =x
Hi Annie & All.
Annie, do you know
moo.fx.
What do you think?
See it in action in my
Web Dois Ponto Zero blog with some things not totally as I wanted, I should say. But it worths a time to explore, I think.
I made a harmonium effect in the this
post
and a todo list that allows to sort simply by drag and drop to up or down. The thing is that when the page reloads, the work/list I have done it's gone.
I post a message in their forum asking if it is possible to save the changes we made.
Hi Annie
I've gone back to my original template for the moment - I found a collapsible code on another site that I'm using for the moment but I think that yours are much better.
I'm going to go and start with your code from the beginning with no other widgets that might be interfering.
Thanks
Amy
Hey!
Nice hack. I had a similar script for expanding parts of my posts, as most of my friends don't like reading long posts (They do expand parts of the post if they find it interesting :D)
I recently added a bit of Fade effect, which I think even you could add in your togglecomments() function :)
Check the recent post on my blog to see how I use it!
Keep posting!
@RaSh, What a great way to do it!
I tried this hack out and it works great! But this seems to be made only for a linklist, is it? Is there any way I can change the widget type from "LinkList" to "HTML"?
Thanks, and keep posting!
@jothiek, not that I know of.
This Is What I am Searching for. But I Want to Know More How can I use the same thing In my Blog Post That I Want to Show Hide Some Code of Blogger Hacks. Please Help Me Out
@Gurpreet Singh, try this
Post expand/collapse
hi, it just linklist right? could u share how if all widget? i mean html widget. it will make feature better than just linklist. thx
hello.. i like your blog.. many tutorial i will get from here.. thank'z for this tutorial.. i have use it in my blog.. (^__^)
Hey I love this blog and Ive used a bunch of things to tweak my blog.
One thing I added was the expand/collapse feature to all my sidebar widgets, which works and looks great!!!
But recently (February 2009) Blogger changed the Followers widget. Now the expand/collapse no longer works. The code for the new widget looks different too, so I can't figure out where to place the inserted lines.
Any ideas?
Thanks so much!!
OMG! Thank you for this code, i love it!
This is a great code for saving spaces on your blog that you can use for other widgets...I will also try this out on my blog and see if it looks nice, too..just like it was on your site..thanks Annie for sharing..as always you are so helpful.
I love love LOVE this hack. However, I've been trying to figure out how to adapt it to work on the archives in the sidebar without much luck. Any help would be appreciated!
Thank you, thank you, THANK YOU! All of your hacks and tutorials are fabulous, but this one is one of my favorites! Thanks for sharing your genius! ^_^
I dont get it..can u give some screenshot..i always got into error..help!
still dont success to apply this hack on my blog..give some screenshot pls!
i dont understand it..where can i get my linklist # ??
" XX - the linklists are assigned a unique number. So, if you try to save your template and it says something about two widgets having Linklist3, change the number on one widget. "
that section....
guide me how expand/collapse my bloglist???
Hope you can give a tutorial about how to expand/collapse bloglist. I really need that.
This is a pretty neat idea! Thanks!
Thanks for the nifty piece of code. I got it working within 10 minutes! Thanks again