Hide/Show, Expand/Collapse - navigation element
I am excited...again. It all goes back to my sidebar and drop down menu issues. My sidebar must be organized, tidy, make sense, easy to navigate, pleasing to look at and serve a purpose. For other issues concerning my sidebar, I used these methods that are explained in these posts A drop-down menu alternative and Blogger 'Previous Posts' & 'Archives' Drop Down Menu. Each method worked for a different type of navigation problem.
I used the hide/show element not so much for navigation,
Hide/Show Element"The hide/show element allows a portion of the page contents to toggle between hidden or shown. There are multiple valid locations where hide/show can be used.
from www.oracle.com
Here are the steps involved. It has three parts. 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">Third put this in your sidebar where you want it to appear:
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')"
>Title</a><br />
<div class="commenthidden" id="UniqueName"
></div>
This is what my code looks like:
<a aiotitle="click to expand" href="javascript:togglecomments('chickletlist')">I love Chicklets...+/-</a><br /><br>The UniqueName had me puzzled but CptCanuck explained that it had to be a name that was 'unique' from any other in my template. So, I called it chickletlist. Next give it a title. I chose I love Chicklets...+/-. The actual link is placed between the <div></div> elements. You may add links until you feel the need to move on.
<div class="commenthidden" id="chickletlist">
<a title="Blogger Forum, the Blogging community" target="_blank" href="http://www.bloggerforum.com/">
<img border="0" src="http://www.bloggerforum.com/images/bf5.gif" width="80" height="15"></a>
</div>
Edit 5/24/06: Today I saw a post over at Freshblog that discusses the Hide/Show hack. Somehow by reading different links, I ended up at Singpolyma - Technical Blog and saw an awesome example of using Hide/Show for the whole sidebar!
Also see: Blogger Beta: Hide/Show, Expand/Collapse Labels
Labels:
Classic Blogger,
Design,
Expand/Collapse,
Hacks,
Navigation
92 Comments:
I incorporated your coding into the http://temptrialling.blogspot.com/ blog that I use to trial ideas and looks before changing my main blog http://backtofront.blogspot.com/. One thing that you omit saying is that I do not think that it works if you use lt&;/MainOrArchivePagegt&; in your template. Also, if you have a look at temptrialling, clicking on an item in the dropdown menu causes the page to revert to the pre-dropdown menu look and necessitates using the backpage arrow or page refresh to get back to the new look. Or have I boobed in adding the code?
Thanks for the tip on "MainOrArchivePage". I removed that element from my blog due to a previous post issue. So you are probably right.
I looked at temptrialling, and I did notice the difference in your header. I don't know why that happens. Strange.
Thanks a ton for this hack. I was actually viewing your blog's source code to pick up this hack without realizing that you have posted the steps to implement it. From the source code I understood/implemented every thing expect this:
.commenthidden {display:none}
.commentshown {display:inline}
When I was about to give up I clicked on the label cloud and landed here and was a lucky to realize that I missed the very first step. Anyways thanks and have a nice day!
Glad you found the post...it does explain how to impliment the hack. The part you left out is easy to miss.
Hi,
I've modified your code for labels on the side bar:
To hide and show labels, use the bolded code below, replace [] with <> .
Working example
Find the line:
[b:widget id='Label1' locked='false' title='Labels' type='Label']
Modify the code below like this:
[b:includable id='main']
[b:if cond='data:title']
[h2][data:title/][/h2]
[/b:if]
[a aiotitle='click to expand' href='javascript:togglecomments("browselabel")'][+/-] Browse Categories[/a]
[div class='commenthidden' id='browselabel']
[div class='widget-content']
[ul]
[b:loop values='data:labels' var='label']
[li]
[b:if cond='data:blog.url == data:label.url']
[data:label.name/]
[b:else/]
[a expr:href='data:label.url'][data:label.name/][/a]
[/b:if]
([data:label.count/])
[/li]
[/b:loop]
[/ul]
[b:include name='quickedit'/]
[/div]
[/div]
I have a list of blogs in my blogroll. How can I use this method for blogroll to hid/show. Right now I don't publish blogroll as I have 20 bloggers in the list.
@Pria, follow the 3 steps I have outlined in the post. But when you get to the third part, put the blogroll code in where I have purple. If you don't understand, or need more help, let me know!
I had no problems with second and thrid. But I am little confused with style sheet . This is where I used.
.commenthidden {display:none}
.commentshown {display:inline}
.comment-footer {
margin:0 0 .5em;
padding:0 0 .75em 20px;
}
@Pria, It seems you have it in the right place. As long as it goes between the <head> and </head> tags, I don't think it makes any difference where.
If you could post or email me a link to your blog, I could look your template over and see if I can figure it out. (I can't access your profile...it gives me a 404 error.)
Sorry you are having problems. It is probably something very simple. Templates are soooo very finicky.
Thank you annie. Its works great:-))
Thank you, I like that!
I was worried about how I could offer my category feeds without making one long boring list across the half sidebar - this solves the problem. =)
Doesn't work for me. Neither expands or collapse, plus it shows the labels at first, instead of having them hidden. Maybe it has to do with already having a script for peekaboo comments on the main page? I don't know if that could cause a conflict...
@1977, You know, I think the 'peek-a-boo comments' script may cause a conflict, but I'm not sure. I'm going to experiment on a test blog with the both scripts and see what happens. It would make my life much easier if you could email me your template from the 'edit html' page. For some reason, I can't copy the view source and paste it in a test blog with the beta blogger...i always get an error.
Anyway, I'm going on a road trip to Nashville for a few days, so will look at it when I get home! I won't forget about it!!
Hello Annie,
Thnx much for all this hacks! Ive implemented many of them in my new blog.
I have added a page element on my blog which display my posts by the labels of each post. It is a bit like your Table of Contents.
You can see it here.
http://howtoin7seconds.blogspot.com
But can you please tell me how I can use your Hide/Show - navigation element with it please.
Ive tried the 3 steps but I could not do it. Btw I'm using beta.
Thnx much... Hope to hear from you soon.
@Yan Sniim, I finally got the hide/show hack to work with the labels in blogger beta. Here is what I did.
1. You must implement the first two steps from Hide/Show, Expand/Collapse - Navigation Element.
2. Now open "Template/Page Elements" click on "Add a Page Element". Choose "Labels/Add to Blog". Save changes and close. (This element is temporary...we only need it to find some code, then we will delete it later.)
3. View your blog and right click anywhere in the blog. You want to "View Page Source".
4. In the 'Source' page, find <div class='widget-content'> (we'll do something with it in a minute):
<div class='widget-content'>
<ul>
<li>
<a href='http://annie-flower.blogspot.com/search/label/beta'>beta</a>
(1)
</li>
<li>
<a href='http://annie-flower.blogspot.com/search/label/how-to'>how-to</a>
(1)
</li>
<li>
<a href='http://annie-flower.blogspot.com/search/label/test'>test</a>
(1)
</li>
<li>
<a href='http://annie-flower.blogspot.com/search/label/trial'>trial</a>
(1)
</li>
</ul>
5. Open "Template/Page Elements" click on "Add a Page Element". This time choose "Configure HTML/JavaScript". Now is where the third part of Hide/Show, Expand/Collapse - Navigation Element comes in. Add this code to the 'edit html box':
<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">Title</a><br />
<div class="commenthidden" id="UniqueName"></div>
6. Fill in your 'UniqueName' in the 2 areas. Give it a title. For example "+/- Categories".
7. Copy the code you found in step #4 and paste it between the <div> and </div>
(<div class="commenthidden" id="UniqueName"> PASTE CODE HERE </div>)
8. Save changes and close.
9. Now you can open the 'Label Element' we made in #2 and "Remove Page Element".
I believe that should do it!
This turned out to be a hack in it's self, so I'm going to post it so others can find it too.
i get so engrossed with your tweaks lovely annie, i almost forget to sleep hahaha! ur a geniUs!
@coLourbLind♥aFfaiR, you can get some sleep now...I'm at work!
You ROCK! I've been playing with my "test" blog and this trick works WONDERS!!! THANK YOU THANK YOU THANK YOU!!!
Hey, quick hack on your hack: You can put an image in the "Title" area so that instead of text, like: Chicklets...+/- you can have a button. Make your own custom buttons for free at www.buttongenerator. Very cool!
@Rebecca, glad you like this hack...it is one of my favorites! Awesome addition with the image.
annie, just got this hack up on my blog. You're awesome! Thank you very much for these!
Once again, I've made use of this hack to do some MAJOR tweaking of blogger beta. THANK YOU!!!!
(And you'll notice I swiped your button - under "the fine print.")
@rebecca, WOW, you did an awesome job!!! I really love the whole look of the blog. I especially love the pieces of scrap paper for sidebar titles.
Thanks for the link!
Great job!
Just came across this and thought I would ask a question, You don't happen to have a script that works for automatically expanding and collapsing long entries? I don't like the blogger hacks because they require you to either put it in each entry or the words are still there even if you don't collapse an entry. I have tried using http://www.meghalomania.com/expand-collapse-script-for-blogger-blogs/ but I can't get it to work.
Scripting drives me bonkers ;)
Thanks!!!
annie. i really love your website. keep the good work.
i added your code to my blog and modified it.
instead of onclick events i used onmouseover and onmouseout events
you can see it working here Panama real estate
@realtor, I really like that! I think I may do a post for others to do it too. Thanks.
Hi Annie, I've done something similar on my site Roughstock Studios using the hack at Consuming Experience.
My next mission—and no one seems to have a way to do this—is to find a way to open the target post page with that list already expanded. Does that make sense?
So the new post page would load with an expanded menu on that page only. I could probably do it on all post pages, but I have no idea if it's even possible to do it on specific ones only.
Might you have some idea??
Thanks for sharing all this hard work—it's super helpful.
—JJ
@jessie jane, I wouldn't have the first notion where to begin on this. The solution just hasn't revealed itself to me yet. :-(
Haha, that's what I was afraid of! I think maybe there's a way to do it with javascript, but I'm a coding idiot.
Thanks,
JJ
Hi, after hours of personal failure, i surrender. This was working just fine in my blog. But since i moved to Blogger Beta there's no way i can make it work.
I use it to hide spoilers from movie reviews (not in the sidebar, just in the regular posts). At first, the look its the right one, and the spoilers are hid. The problem is that i cant expand them.
Ive spent hours with this and im so frustrated. D'you have any guess what could be the problem?
Thanks a lot anyway ;)
@.g. I really haven't played with it for inside posts. I will have to look at it closer.
@.g. there is a way. Follow the first 2 steps in this post. Then put the third part of the code in the post editor:
<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">Title</a><br />
<div class="commenthidden" id="UniqueName">PLACE THE PART OF THE POST HERE THAT YOU WANT HIDDEN</div>
I'm not sure if you do this in several posts if the UniqueName has to be different for each post. If it does, just give them all unique names!
Hi Annie, first of all thanks a ot for taking the time of answering. I really appreciate it.
I had already tried that solution you tell me before asking you. That's why i started asking, cause ive been on lots of websites and finding out nothing was properly working for me.
With the exact same thing you tell me about, it was working before i moved to blogger beta.
The thing is my website can work properly without it :(
Agains, thanks a lot Annie.
@.g. Then I don't know what the problem could be. I have a feeling it may be some sort of hack/code conflict. Because it worked it my test blog the way I described. Unfortunately, I am not good at diagnosing such conflicts.
My other suggestion is to use Ramani's hack Selective Expandable Posts. He does quite a bit with expandable code, so look at that post and through his blog. You may be able to put find what it is you need.
Yay! Thanks annie.
I finally figure out why it doesn't work with the beta blogger templates.
Previously, following closely to your instruction, whenever I save my templates the sign " will turn into "
So after numerous experiments...I added the CDATA and it work.. though I do not know how.. I work my way through html through experiments.
this is the second part of the tag (changes in bold and pls remove all the * tags):
...script type='text/Javascript'*>
//<*!*[CDATA*[
function togglecomments...
...commentshown"; }
}
//*]]>
<*/scri
I hope it works for others too :)
I was having one heckuva time trying to do this, but I finally figured out how to expand/collapse the sidebar headings on this testblog of mine (http://tca-reference-desk.blogspot.com/) from your instructions (see "Annie's comment - 11/5/06 8:57 AM").
I got the sidebar headers to expand/collapse for regular links, like Blog Rolls, but I'm trying to also use them for sidebar headings where I've got other things, like google reading lists, video widgets, etc.
However, here are the problems:
Problem #1.) If you'll notice the top sidebar heading on the right side of my blog (Blog Archives2 - http://tca-reference-desk.blogspot.com/), I've tried to enclose the Archives, which naturally collapse, within your hack. You can expand it to reveal what's in the Archives, but if you try to further expand what's in the Archives, let's say by year or month, or click on one of the posts inside the Archives to actually read it, everything contracts back up to the sidebar heading.
Problem #2.) Is it possible to get it to expand and contract by clicking on the sidebar heading instead of a line below the heading? For example, the sidebar header would look like this:
Blog Archives2 [+/-] <---You click on this instead of the line below which now reads:
[+/-] expand/collapse
If it helps to look at an example of what it is that I'm trying to do, take a look at how the right sidebar headings expand and collapse at http://thinkprogress.org
Help!
Thanks in advance,
Maeven
P.S. I've got to tell you, lady, you are 'da BOMB'!
Seriously, you are breaking down into simple English and baby steps some very elaborate and sophisticated coding. You're providing a great service, and I'm very grateful for the help you've given me.
There's also a third problem that I'm having, which is trying to enclose other widgets within this hack.
For example, if I wanted to put a Google reading list "within" a sidebar heading that can 'expand/collapse' - see http://tca-reference-desk.blogspot.com
At that blog, I've got a widgetboxes (see right sidebar, "Phases of the Moon") under the sidebar heading, "What's Up In The Universe" - I'd like to be able to put other links to other sites under that heading, too, and be able to 'expand/collapse' it all. Any ideas on how to do that?
Thanks again,
Maeven
OMG I've spent half the night looking for a script like this. Thank you so much :D
Is there a way to use this hid/show, expand/collapse navigation within the tag cloud?
Matt ,
This is for you .I am giving answer on behalf of Annie who is offline.Please read messageBoard on the top.
The question you have asked is not very clear.You want to hide labels display and expand the labels display on the title.
Showing tag cloud is entirely in expanded view only.It is impossible to code the main as well as within the clouds.
Or else computer geek has to work out. Hope this helps you.
I have tried to do what Goygoycu said on 10/17/06 - 6:59 AM: about making the dropdown menu possible for labels. It didn't work!!
Please tell me what went wrong because I have done so exactly like he said millions of times.
If you have figure it out, could you please be kind enough to email me? jestia2007@yahoo.com
I am with AA. I have tried everything to get this to work for my labels and am at my wit's end.
This is my blog so you don't have to wade through my Profile...
http://complexfemme4u.blogspot.com
Help!!!!
Hi!
You said to enter the following code in your style sheet:
.commenthidden {display:none}
.commentshown {display:inline}
But, wher should i put this code?
Thank's
:)
@cammu, it is also between the head tags. I put mine under the comment part. Here is just the beginning of my comment section in the style sheet.
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #999999;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
padding: 5px;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
Thank's Annie but it's working :(
I don't understand for the third part. You said: put it in your sidebar.
So, i have to "add a page element"?
@cammu, ahhhh...blogger beta. That makes a difference.
Open a HTML/JavaScript element. And stick the third part of the code in there.
The first 2 parts of the code go in the template as instructed in this post.
Wouhou!
Now it's working. Thank's a lot Annie.
:)
I love the Wouhou!'s
Superb.....Great Hack....Although it took me 1 hour to read the whole post repeatedly to make sure that i understand the instructions. And it's worth.... :)
Thank you so much Annie...
Dear Annie,
I noticed that when i post new articles in my blog, the numbers of my labels are not changing as it should be. And also to my archive section...it's seem not functioning very well using your expand/collapse code. Hope you will help me to figured it out.... :)
Thanks you....
nazmieski, I have tried to figure out why this is happening. I looked at your blog and template, but no luck. I never noticed it before as I don't use the archive nor the numbered labels on BlogU. If I come up with something, I will let you know. If you come up with something, let me know :-)
I see, will figured it out too.... :) Really love your expand and Collapse Hack.... Can't wait to find more out more your other great blogger beta hacks..... :)
I am curious how you would have a link on the main parts? Currently the url is "javascript:togglecomments('chickletlist')"
So if someone has JS disabled they are screwed. Anyway to make the 1st level hyperlinked?
Well, I'm sorry that I don't have a good answer. My knowledge is limited in the land of coding. My feeling is JS should be enabled because otherwise much of the internet experience is missed. (I know I'll get slammed by this from the real geeks, so you guys save your breath. This is my personal opinion.) My answer to this is, obviously, enable javascript.
I'm not sure exactly wht you mean about link on the main parts. If you could elaborate on this a bit more.
Ok I figured out how to do it. I am using your js to expand and collapse the side navigation. I'll email the files to my home email and put it online tonight so everyone can see what I am doing.
Essentially I have a side navigation that expands and collapses when you click the plus/minus button. If user has JS disabled the 1 tier links will still be hot linked. They just wont be able to drill down the the sub links because the js is disabled. Therefore the "dropdowns" will remain hidden. Hope this helps explain it better. Live example forthcoming tonight. Thanks for the little js! My navigation rocks :)
çiçek
flower in turkey
Hi Annie,
I want to ask you where to put this third part code if I want to use it in my post.
I follow your suggestion like you said to g.
I tried to apply it, but I pretty confused to see my blog mess up.
So, I tried to paste the code in my template [ foolish way ]
And it doesn't work either.
I wish you can help me with your genius solution.
I simulate it at http://perpuz.blogspot.com
As soon as it works, I'll apply it at http://charityebooks.blogspot.com
Huge thank in advance. I'll be back later and expecting your reply. :)
@sundaelicous, make sure you have this in the CSS style sheet:
.commenthidden {display:none}
.commentshown {display:inline}
(If you can't find it, look at the top of my blog for the link to the post on how to find it.)
Then, put this right before the </head> tag:
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
This part of the code goes either in a widget (choose the HTML/Javascript one) or where ever you want the hide/show link:
<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">Title</a><br />
<div class="commenthidden" id="UniqueName"></div>
Hi Annie,
Thanks for the advice. I've just try it out again. And this is what blogger say
Your HTML cannot be accepted: Tags cannot enclose tags div class... style="
I put the first two step below [head] (I've seen somebody put the script there)
And I put the third part between my test post. Hope you can help me solve this. :-)
Btw, I'm trying it at http://perpuz.blogspot.com
Annie,
I know its your old post but a great hack. Just a query: I have a list of blogawards as pictures and how can that be used in hide/ show link.
Can pics be used as +/- link too?
@priya, Yes, you can. If you notice where I have "This is what my code looks like:" that code is for a button image that links to a blogging forum.
Did you know theres a problem with the add-on "NoScript" with Firefox and the expend/collapse script?
So, if my visitors are using this add-on, they cannot see my expend/collapse menus because it says: "Page not found" when they click on it.
Is there a way to fix that or should i use another method to present my menus?
Thanks Annie.
:)
@cammu, That I can't change. If they use NoScript, then any code with JavaScript will not show or work properly on their computer.
I'm not real familiar with NoScript, but if there is an option for them to turn it off on your site, that would be the solution.
Thank's again Annie.
Have a nice day.
:)
Thanks Annie. Your hacks works! And your blog rocks. I translate this hack and the categorie one at my blog for brazilians like me. Of course, i link back to you. Hugs.
@Claudya, Thanks!! And thanks for translating and the link.
@ONEDIA, I don't see any of BlogU's code on any of your blogs. If you tell me which one and leave your attempt in place, I can see what the problem is.
My other advice is to start over and follow the instructions to the T. Code is very picky and must be exact, or it doesn't work.
@ONEIDA, I'm sorry, I completely misunderstood what you were asking. To make the widget hide/show, is a little different. The code for this was built by Singpolyma. Here is the post:
Peek-a-boo Widgets
and here is the
Widget
It will make the whole widget hide/show by clicking on the title...as I have in my sidebar for several widgets.
Sorry for the misunderstanding!
@ONEIDA, I forgot to say that I added you to the BlogU Student's blogroll! Welcome!!
Great Code- simple and expandable. Huge thanks!
Hi Annie! I really salute you on this...Hehehehe, thanks for the compliment...Today not only that I was able to linked the student's list but I was able to create my own for my blogroll, because for some reason the blogger's page element for blog rolling disappears the moment you move it to a different position. Thanks! And I hope that I will be able to do other tips you have here for my blog and hopefully next time I can be faster...Cheers!
This is good info. Exactly what I was looking for.
That was a great hack. Worked for me
Nice sidebars. I have been trying to find collapsible sidebars for some time and I was unable to find them. This post really helps and I hope to implement them in a blog of mine. Thanks.
Hi! I would like to implement this code using mouseover. How can I do that?
Thanks.
Please email me: vanessafatimaATyahooDOTcomDOTph
thanks I used this for my Visitirs details on my blog. It reduced verticle length of my blog. And looks so good now. thnaks
sujit
marathikavitaa.blogspot.com
ny.sujit@gmail.com
I am a new blogger and I do not know how to wrapped my long posts .Please help me for that .
Thanks and regards
l.k.phyu@gmail.com
Very helpful, thanks for the share....
your blog is too good ,i have solved my 4 hard problem after reading your blog, thank you so much.
thanks! i have been looking for this code for a long time :D
This would work great in my sidebar for my blogroll. Thanks a lot Annie.
Have been looking for this tricks for a while
Thanks for sharing the tutorial
Very nice hack. Im gonna to add it to my blog.
Thank you annie! Keep up the good work :)
Awesome post. Awesome Comment section. This helped a lot. Thanks.
I have a list of blogs in my blogroll. How can I use this method for blogroll to hid/show. Right now I don't publish blogroll as I have 20 bloggers in the list.
@tanapro, here is the code that I use (after installing the code from the above post into the CSS style sheet). I opened a html/javascript widget and put this in:
Are you a student of BlogU? Yes? Then join the blogroll just for us!! For instructions on joining see <a href="http://bloggeruniversity.blogspot.com/2007/03/join-blogu-students-blogroll.html">Join the BlogU Students Blogroll!!</a><br/><br/>
<center><a target="_blank" href="http://bloggeruniversity.blogspot.com/2007/03/join-blogu-students-blogroll.html" title="Students of BlogU">
<img border="0" width="80" src="http://h1.ripway.com/anniebluesky/blogustudent.png" height="15"/></a></center><br/>
<a aiotitle="click to expand" href="javascript:togglecomments('blogustudents')">+/- BlogU Students Blogroll</a><br/><br/>
<div id="blogustudents" class="commenthidden">
<script language="javascript" src="http://rpc.blogrolling.com/
display.php?r=10fb2ff44d81d6db5d565673f96537a4" type="text/javascript"></script>
</div>
REALLY GREAT!!! I WANT TO PUT ONE MORE MINUS/PLUS BUTTON IN THAT COLLAPSE/EXPAND >>>> HOW CAN I ???
Hi annie! How to make show/hide hack like your Table of Content?
Annie, I understand you may not get around to this question, but I've implemented this code (or the peek-a-boo code) and I have it "kinda" working. The problem I'm having is that when I click on the link to show the hidden text (i'm just hiding paragraphs within the sidebar - but testing on a static page) the hidden text shows...but only for about 1-2 seconds and then it reverts back to the collapsed/hidden way.
Here's the page I'm testing it on:
My Test Page
Appreciate if you can help and great tips all over this site. I'm new to this blogging thing (as far as editing the templates), so I appreciate those of you who help us newbies out.
Cheers.
@house, I've looked at your page source, and couldn't find this:
.commenthidden {display:none}
.commentshown {display:inline}
That's as far as I investigated. Reread the post to see where to put this. Sometimes when codes don't work for me, I do it over and over...usually because I miss one step.
Annie, I've looked and realized it wasn't there, but now I'm not sure where it should reside in the blogger template.
I've tried a couple of locations and neither result in the desired effect.
I can just keep copy/pasting it all over to hope I get it, but I am hoping to understand why it goes where it is supposed to.
Suggestions?
How do you stretch a vertical navigation bar using CSS to have the same height as the content box?