[ PHALKUNZ'S BLOG ]

I've moved to http://phalkunz.com. You'll be redirect to my new blog soon.

Wednesday, September 13, 2006

Expand/Collapse Code

As I've been asked by a few friends of mine about Expand/Collapse, I just wrote a small tutorial of it even though you can find the code in page source of my old blog template it's not easy to follow because the code was lengthy and the function I wrote is not well structured I would say.

<html>
<head>
<script language="javascript">

// TODO: expand/collapse (show/hide) an element, specified by id,
// triggered by an element, specified by triggerID. triggerTxt is a text in trigger element.
function toggle(id, triggerId, triggerTxt){
e = document.getElementById(id);
trigger = document.getElementById(triggerId);

if (e.style.display == 'block' || e.style.display != 'none'){
e.style.display = 'none'
// instead of [+] you can also replace with an image as well
trigger.innerHTML = "[+] " + triggerTxt;
}
else
{
e.style.display = 'block'
// instead of [-] you can also replace with an image as well
trigger.innerHTML = "[-] " + triggerTxt;
}
}

</script>

</head>
<body>


<h3 id="trigger1" onclick="toggle('list1','trigger1','click here')">click here</h3>

<ul>

<!-- element (in div) to be expanded/collapsed -->
<div id="list1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</div>

<ul>

<!-- call this function now to collapse list1 element when the page is loaded -->
<script>toggle('list1','trigger1','click here')</script>

</body>

16 comments:

waz said...

u r a bloody fuckin freakin genius, bro! :D
thanks

Hans said...

Yo dude, nice code breaker ;) you might group those and one day make it a great mod-series ;)

hey talking about expand/collapse : when I used blogger.com that was one the things that I hated : the comment form got onto another page for commenting. (wordpress has it below the post in question itself)

I succeeded in tweaking the codes and displayed that just below each post.

But now that I'm thinking of it, is that something great that blogger put under cover? How would that be great, your title gave a lot of idea, might expand that in some post soona or later ;)

p+k said...

Waz: i don't thin it's genius coz it's been done long time ago and many times as well. It just this one is my version heheh or maybe i was too lady to learn other's code. Thanks, anyway.

Hans: cool bro. i like to see it with animating fx. I was trying to do it but gave up because I couldn't get the height of div after div is filled with content unless we set the height beforehand specifically.

KK@111 said...

Oh, that's interesting. Now m having a proble about the code. It's about the expandable post summeries. When a post is too long and we don't want it to show all of it, we use "Read more!", for example. When we click on it, it will link to the post location. After I tried to do as the direction in http://help.blogger.com/bin/answer.py?answer=42215&topic=8932
I can't do that. They appear in all every post as you saw in my blog. Can you give me some idea about that problem?

p+k said...

kk@111: I just tried it and it works. see here http://myitechspotz.blogspot.com/ try the latest post. The idea of the hack is simple but smart. The first part of the conditional CSS is to tell the browser to hide anything in span tag in main page (MainOrArchivePage) with fullpost id. And the second part is the other way around, shows the element, but this time in ItemPage (the page that displays that post only). The second part of the hack, adds "Read More" link to every post in the main or archive page. And lastly, put the things you wanna hide in <span id="fullpost"> in create new post and voila!
I should try again step by step carefully. I think you might have missed a step or two.

KK@111 said...

Oh, I'm really thanks for your prompt reply. But the one that you did, just have the problem as mine.

p+k said...

So you don't want the "read more" appears in every post, right? BUt that's the way it is supposed to be because you put the link the in post template. YOu can fix it by delete the link from the post pix and write it manually every time you want it. Hope I answer your question this time.

KK@111 said...

Thanks you. It becomes more complex. I made it to normal. I'll try that again next time.

Hans said...

yo pk, got a tour here. Yo mane, there's a link next to your about one(in the navigation banner), click what's that supposed to do?

Yo for the email, are you inviting spammers, I've got a nice generator for your email in pic, you can get a look if you want : Emalimage

p+k said...

I was just testing something. Thanks for the emailimage. It's sucha smart idea.

Anonymous said...

A problem is: when i copied it 5 times, it would align to the left. I know absolutely nothing about html, javascript etc. Please help.

p+k said...

Anonymous: what you mean by "copy it 5 times"?

Spring Onion said...

i wonder about script!! u no i try to copy some blogger layout scrpit but it didn't work!! it pissed me off!! can you give me some clues about it plzzz

p+k said...

If you follow the instruction properly then it should be fine. Try to follow carefully. If u don't understand the terminology or what they talk about just ask them.

Eyes said...

This code looks so simple, but I can't get it to work. Could you help me? I put the first script code in without a problem, but I don't know where to put the body code to get it to work!

musicFan said...

You can see a good example of your code in use on this awesome music blog:

Chronic Music