Blog tsjuz: Expanding Text

I've been wanting for an age and a half to have expandable text on my books page, and I finally tracked down good instructions on how to do it. You'll find them here, courtesy of itechcolumn.com.

What does it do? It allows you to create a single word, like "query" which your visitors can then click on to expand out your text, so that the query only appears when clicked. A nice way to save some space and make your blog a little neater overall.

This is not for the faint of heart, but if you understand the very basics of markup language (that everything between an open and close tag is subject to the parameters of that tag), it's fairly straightforward.

NOTE: this is different than the blogger "jump" break, which you'll see below. For that, all you need to click is the jump break button in the "compose" field.  You can only insert one jump break per post or page; you can insert unlimited amounts of expanding text links.



Editing your template with the dropdown script

1. Duck into your template's HTML. Augggh! Scary. Not really, it's okay. Click on the "template" button from your blogger dashboard (with the paintroller). Then click on "HTML" under the "Live on Blog" picture.
2.  Tell the warning message that it's okay, you know what you're doing.
3.  Back up your template. Check the "expand all widgets" box, and then click anywhere in the template HTML, push Ctrl+a for "select all," then copy and paste that baby into a blank notepad or textwrangler document and save it someplace safe. I like to use "blogbackupDATE" as the filename. You can save it as a text file, that's fine. All you need is all the markup in case you flub up the next part. 
4. Saved? Okay. Onward! Back to your template HTML on blogger.
5. Find the tag </head>. There will be only one. You can use Ctrl+F or "find on page" in your web browser to find it. 
6. Found it? Great. Now, take the script (under step 1) from itechcolumn, and paste it above the </head>. Copy the ENTIRE thing...the box on itechcolumn scrolls! 
7. Save your new template. That wasn't too bad, was it? 

Inserting Dropdown Text on a Page

1. Go to the page or post where you want to insert your dropdown text. 
2. Click on "HTML" instead of "Compose."
3. You may want to save a draft of this page, or at least copy and paste it into another document while you work. See step 3 above.
4. Here's where you'll need to know just a little bit about HTML. If you paste the text into the plain HTML box, it will go in with no formatting, which is exactly what you want. Go ahead and do that. You'll have something like this: 

text text text text text text text text text text text text text text text


5. Immediately above that text, cut and past the code for the dropdown from itechcolumn (from step 2). It looks like this:
   
   <a aiotitle="click and Expand or Collapse" href="javascript:togglehideshow('SomeName')">
   Title Link</a><br />
   <div class="hidecomment" id="SomeName">Expanded Content</div>
6. You'll need to do some swapping here: 'SomeName' is anything you'd like to name your segment, for example, I called my first segment 'isaacquery' as it was the query for ISAAC IN THE MIDDLE. Title Link is what will appear on the page for people to click on. I chose "query" since there was already information about what the query was for.
7. Now, you need to fit everything you want to expand where it says "Expanded Content." This is where it gets tricky. Blogger really loves to control your formatting with the <div> tag. This means that every singe paragraph will probably end with something like: </div><div class=plaintext color="black"> etc.   You will need to take all of those out. If you followed the instructions in step 3, you may not have this problem. Good for you! But otherwise, you need to make sure that there is no intervening </div> tag between the <div class="hidecomment" id="SomeName"> tag and the end of the text you want to hide. If you go to your finished page, and see parts of your text unhidden, this is why! You've got a </div> tag somewhere!
8. If you need to break paragraphs within your expanding text, instead of using </div>, you can manually insert two carriage returns by entering the tags: <br /><br /> at the end of each paragraph.
9. Save your page and load it to preview it. You should now have a link with whatever title you replaced "Title Link" with, and when you click it, it should expand out all the text.  NOTE: if you use "preview" instead of saving, your links won't be clickable. However, it can be a good quick check to make sure that you've got all the text included between your <div> tags: in the preview, only the "Title Link" text should appear.
10. Viola! You've just tsjuzed your blog. Congratulations!