View Full Version : Switch Content format questions

09-07-2006, 05:47 PM
Switch Content I

I've used this script successfully to set up a couple of FAQs. Now I'm trying to use it in a slightly different way. My client has a lengthy list she wants to display in sections to be revealed on click. Further she feels the +/- symbols are not clear enough. So I'm trying to use gif images for the first time. Is there any way to add space between the image and the text? I guess I could go in and add space to the image. Just thought there might be another way.

Also, I've never done more than Q/A before. She has the need for nested topics. I wasn't sure this could be done. I am a designer NOT a coder so my coding skills are very limited. What I figured I'd do is put in the headings manually on the page when there are subheadings that will expand. That's working... EXCEPT I'm getting a ton of space between sections and I'm at a loss as to how to manipulate all this to make it look good. I don't know what to edit or how to control the space between sections.

Here's a link to a sample of the page. I haven't put all the content in yet as I need to be sure the client likes this approach first.

Your help would be greatly appreciated. Thanks for your patience with a newbie.


09-07-2006, 06:30 PM
Well, what you have there looks fine to me. I even see space between the gif and the categories. However, if you want to add more space manually you can use &nbsp; which will add one space. So use as many as you want. As for the space between them, using css, you can adjust the padding of the <li> elements. If you need to adjust just the ones that are expanding and contracting, then I would suggest giving either the other <li> elements a class name, or giving class names to the category ones. That way in the css you can do..

padding: # (top) # (right) # (bottom) # (left);

Ignore the ( ) and replace the # with how much spacing you want. Pixels or what not.

Not sure what you mean by nested topics, unless you mean having an expandable block within another expandable block. In which case I could help with that. I did the same thing on this page of my website http://www.tsrealms.com/dictionary.shtml . I used div's, though, but the same idea should work for whatever containers you're using.

Hope that helps some. If any of it didn't make any sense I'd be happy to answer questions.

09-07-2006, 06:42 PM
Thanks for your speedy reply. The space after the icons is because I added 4 pixels to the right of them all in Photoshop. At least I got one thing done!

I'd already admired your Dictionary and noticed you did indeed have nested elements (yes you understood what I meant). I looked at your source, but again, as a non-programmer, I was a bit overwhelmed. Plus it looked like you used Switch Content II not I. I haven't looked at it so don't know what, if anything, I'd have to do differently.

I appreciate the info on the padding. The space I'm concerned about is before and after headings. Those same h2 and h3 tags do NOT have space before or after in the CSS. So I can't figure out where the extra space is coming from.

I don't write code. I use NetObjects Fusion which is WYSIWYG (sort of). I can edit a few basic things in code but I'm out of my comfort range pretty quickly. Am I helpless?


09-07-2006, 06:55 PM
Nah. No one is helpless.

The headings are probably adding their own spaces above and below. They do that automatically, I believe. Just as they automatically go bold. You can change all that in the css. As I said, just add classes to the headings you want to change (or use existing classes if you already have them) and play around with the top and bottom padding until you fit it somewhere you like.

I don't really know the difference between the two codes, but I imagine they're basically the same, except mine has a few more features. The structure seems to be the same.

To do multi-levels..based on what you have there.. (I'm assuming here that you want the categories within the expanded portion to expand as well.)

You'd need to make it look something like this.

** What you already have...**

<h3 onclick="blah blah"></h3>
<div for the categories>

** What you should add **

<h3 onclick="blah blah"></h3>
<div for the categories>
<li onclick="blah">
<div for the sub-categories, one for each category>
whatever goes under that particular category

As you can see, it's just about the same as the categories. You're just nesting it all. I'm not sure if that will work, because I used headers within divs, not <li> elements, but it's worth a shot. Hope this helps.

If it doesn't, feel free to pm me with an IM name or something, and I can probably help you on AIM or MSN.

09-08-2006, 12:25 AM
Thanks for all your help. My client has decided to go with an alternate approach that I offered her. So we won't be using this script this time. If you want to see what we ended up with (list still incomplete) it's at http://www.hoffmangraphics.com/susan/html/tree.html. I used a NetObjects component called Text Tree and generated an entire separate site then I'm calling it in an i-frame. She likes how the icons work and how clean the spacing is too. Case closed. Thanks again for your help.