Click to expand.

dorts · 10-09-2006, 05:19 AM

Hi all,

Is there any way to have a text or button that when clicked, will expand down? Like having 1 blog entry on a page. Clicking on the text or button will show another blog entry below, so altogether will have 2 blog entries on a page. I shall create a picture to demostrate.

After clicking on the text/button...

Comtrad · 10-09-2006, 11:15 AM

Make different pages with each lbog and series of blogs you want to be able to "expand. Then on the click t expand have a link to the next page.

So on page one the click to expand takes them to a page with the first post as well as the second, and so on.

**DJ-Zep** · 10-09-2006, 01:45 PM

I found this script on dynamicdrive.com.

Put this in between the head tags of your document (<head></head>):

HTML Code:

<script type="text/javascript">

/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
		if(el.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") //DynamicDrive.com change
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

</script>

Put this where ou want the read more link to be:

HTML Code:

<div onclick="SwitchMenu('sub1')">Read More</div>
	<span class="submenu" id="sub1">
		Full Story Here
	</span>

To create a new drop down for the next story, change all "sub1"s to "sub2" and go up as high as you need to for each story.

Hope this is what you wanted. Good luck!

dorts · 10-09-2006, 11:37 PM

Thanks all,

I can't seem to get it to work DJ-Zap.

I wonder if I did anything wrong.

http://dorts.cabspace.com/

dorts · 10-10-2006, 10:04 AM

Try this URL. The other hosts seem to always be down.

http://dorts.50webs.com/

**DJ-Zep** · 10-10-2006, 01:14 PM

My apologies, dorts.

The correct code is:

HTML Code:

<div id="masterdiv">
<div onclick="SwitchMenu('sub1')">Read More</div>
<span class="submenu" id="sub1">Full Story Here</span>
</div>

dorts · 10-10-2006, 06:30 PM

Nope. Still doesn't work.

**DJ-Zep** · 10-10-2006, 07:01 PM

I know what's wrong

Copy the info in the box on http://www.pointblankdesigns.net/tsf/dorts2.html

dorts · 10-10-2006, 07:05 PM

LOL. Thanks again. But still doesn't work.

**DJ-Zep** · 10-10-2006, 07:08 PM

Read my edited post.

dorts · 10-10-2006, 07:27 PM

You are GREAT DJ-Zep!!!! Work great!!

I will definitely credit you in my webpage!

1 minor problem thought,

My date is not aligned.

http://dorts.50webs.com/

Click on Read More and check it out.

You will know what I mean.

**DJ-Zep** · 10-10-2006, 07:51 PM

Try putting text there - the span should knock it down to the next line.

dorts · 10-10-2006, 08:03 PM

Thanks DJ-Zep, but where do I put the text? Before the date?

**DJ-Zep** · 10-10-2006, 08:04 PM

Quote:

Originally Posted by dorts

Thanks DJ-Zep, but where do I put the text? Before the date?

See in the code I gave you where it says full story here? Put some text right there and see what happens.

dorts · 10-10-2006, 08:10 PM

Tried putting text there but it still refuse to move down to the next line.

**DJ-Zep** · 10-11-2006, 02:29 PM

You were putting the full HTML block of the short story. Just put the full story text. It will drop down.

Copy the second box from http://www.pointblankdesigns.net/tsf/dorts2.html

dorts · 10-11-2006, 06:03 PM

But I would like to have a "blog entry" similar to the first or second. With the date and stuff.

Is it possible?

**DJ-Zep** · 10-11-2006, 07:35 PM

It might not because of how browsers interpret the span tag. I could give it a go.

I just thought you need the full story to drop down instead of a totally new blog entry.

dorts · 10-11-2006, 07:40 PM

Thanks for all the help and effort put in.

The drop down is actually to show previous blog entries. I felt that having two entries showing is enough. Too many entries and people would have to scroll down lots. So I thought of have the user choose if he/she wants to see the previous entries. So I decided to use the drop down method. Save space and time scrolling.

**DJ-Zep** · 10-11-2006, 07:56 PM

Ahh I see. In blogs thta I've seen, they usually just have an archives section that splits it up into categories. Once you start posting blogs every week, there will most likely be too many to display on one page for anyone to care to read about. I'm not forcing but recommending you use an archives section on your site.

10-09-2006, 05:19 AM	#1 (permalink)
dorts Analyst, Security Team Join Date: Mar 2006 Location: Singapore Posts: 1,599 OS: Windows XP SP2 My System	Click to expand. Hi all, Is there any way to have a text or button that when clicked, will expand down? Like having 1 blog entry on a page. Clicking on the text or button will show another blog entry below, so altogether will have 2 blog entries on a page. I shall create a picture to demostrate. After clicking on the text/button... __________________ If you think TSF have helped you, please kindly donate to TSF and help keep this site free to all.

10-09-2006, 11:37 PM	#4 (permalink)
dorts Analyst, Security Team Join Date: Mar 2006 Location: Singapore Posts: 1,599 OS: Windows XP SP2 My System	Thanks all, I can't seem to get it to work DJ-Zap. I wonder if I did anything wrong. http://dorts.cabspace.com/ __________________ If you think TSF have helped you, please kindly donate to TSF and help keep this site free to all.

10-10-2006, 10:04 AM	#5 (permalink)
dorts Analyst, Security Team Join Date: Mar 2006 Location: Singapore Posts: 1,599 OS: Windows XP SP2 My System	Try this URL. The other hosts seem to always be down. http://dorts.50webs.com/ __________________ If you think TSF have helped you, please kindly donate to TSF and help keep this site free to all.

10-10-2006, 01:14 PM	#6 (permalink)
DJ-Zep Design Team Join Date: Mar 2006 Location: Philadelphia Posts: 1,541 OS: Windows Vista Home Premium (x64) My System	My apologies, dorts. The correct code is: HTML Code: <div id="masterdiv"> <div onclick="SwitchMenu('sub1')">Read More</div> <span class="submenu" id="sub1">Full Story Here</span> </div> __________________ Nice music blog Nvu \|\| Notepad++ \|\| Apache \|\| PHP \|\| Keep TSF Alive "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier."

10-10-2006, 06:30 PM	#7 (permalink)
dorts Analyst, Security Team Join Date: Mar 2006 Location: Singapore Posts: 1,599 OS: Windows XP SP2 My System	Nope. Still doesn't work. __________________ If you think TSF have helped you, please kindly donate to TSF and help keep this site free to all.

10-09-2006, 11:15 AM	#2 (permalink)
Comtrad Registered User Join Date: Sep 2006 Location: Somewhere in Illinois Posts: 279 OS: Windows XP	Make different pages with each lbog and series of blogs you want to be able to "expand. Then on the click t expand have a link to the next page. So on page one the click to expand takes them to a page with the first post as well as the second, and so on.

10-10-2006, 07:01 PM	#8 (permalink)
DJ-Zep Design Team Join Date: Mar 2006 Location: Philadelphia Posts: 1,541 OS: Windows Vista Home Premium (x64) My System	I know what's wrong Copy the info in the box on http://www.pointblankdesigns.net/tsf/dorts2.html __________________ Nice music blog Nvu \|\| Notepad++ \|\| Apache \|\| PHP \|\| Keep TSF Alive "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier." Last edited by DJ-Zep; 10-10-2006 at 07:07 PM. Reason: Changed link

10-10-2006, 07:05 PM	#9 (permalink)
dorts Analyst, Security Team Join Date: Mar 2006 Location: Singapore Posts: 1,599 OS: Windows XP SP2 My System	LOL. Thanks again. But still doesn't work. __________________ If you think TSF have helped you, please kindly donate to TSF and help keep this site free to all.

10-10-2006, 07:08 PM	#10 (permalink)
DJ-Zep Design Team Join Date: Mar 2006 Location: Philadelphia Posts: 1,541 OS: Windows Vista Home Premium (x64) My System	Read my edited post. __________________ Nice music blog Nvu \|\| Notepad++ \|\| Apache \|\| PHP \|\| Keep TSF Alive "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier."

10-10-2006, 07:27 PM	#11 (permalink)
dorts Analyst, Security Team Join Date: Mar 2006 Location: Singapore Posts: 1,599 OS: Windows XP SP2 My System	You are GREAT DJ-Zep!!!! Work great!! I will definitely credit you in my webpage! 1 minor problem thought, My date is not aligned. http://dorts.50webs.com/ Click on Read More and check it out. You will know what I mean. __________________ If you think TSF have helped you, please kindly donate to TSF and help keep this site free to all. Last edited by dorts; 10-10-2006 at 07:35 PM.

10-10-2006, 07:51 PM	#12 (permalink)
DJ-Zep Design Team Join Date: Mar 2006 Location: Philadelphia Posts: 1,541 OS: Windows Vista Home Premium (x64) My System	Try putting text there - the span should knock it down to the next line. __________________ Nice music blog Nvu \|\| Notepad++ \|\| Apache \|\| PHP \|\| Keep TSF Alive "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier."

10-10-2006, 08:03 PM	#13 (permalink)
dorts Analyst, Security Team Join Date: Mar 2006 Location: Singapore Posts: 1,599 OS: Windows XP SP2 My System	Thanks DJ-Zep, but where do I put the text? Before the date? __________________ If you think TSF have helped you, please kindly donate to TSF and help keep this site free to all.

10-10-2006, 08:10 PM	#15 (permalink)
dorts Analyst, Security Team Join Date: Mar 2006 Location: Singapore Posts: 1,599 OS: Windows XP SP2 My System	Tried putting text there but it still refuse to move down to the next line. __________________ If you think TSF have helped you, please kindly donate to TSF and help keep this site free to all.

10-11-2006, 02:29 PM	#16 (permalink)
DJ-Zep Design Team Join Date: Mar 2006 Location: Philadelphia Posts: 1,541 OS: Windows Vista Home Premium (x64) My System	You were putting the full HTML block of the short story. Just put the full story text. It will drop down. Copy the second box from http://www.pointblankdesigns.net/tsf/dorts2.html __________________ Nice music blog Nvu \|\| Notepad++ \|\| Apache \|\| PHP \|\| Keep TSF Alive "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier."

10-11-2006, 06:03 PM	#17 (permalink)
dorts Analyst, Security Team Join Date: Mar 2006 Location: Singapore Posts: 1,599 OS: Windows XP SP2 My System	But I would like to have a "blog entry" similar to the first or second. With the date and stuff. Is it possible? __________________ If you think TSF have helped you, please kindly donate to TSF and help keep this site free to all.

10-11-2006, 07:35 PM	#18 (permalink)
DJ-Zep Design Team Join Date: Mar 2006 Location: Philadelphia Posts: 1,541 OS: Windows Vista Home Premium (x64) My System	It might not because of how browsers interpret the span tag. I could give it a go. I just thought you need the full story to drop down instead of a totally new blog entry. __________________ Nice music blog Nvu \|\| Notepad++ \|\| Apache \|\| PHP \|\| Keep TSF Alive "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier."

10-11-2006, 07:40 PM	#19 (permalink)
dorts Analyst, Security Team Join Date: Mar 2006 Location: Singapore Posts: 1,599 OS: Windows XP SP2 My System	Thanks for all the help and effort put in. The drop down is actually to show previous blog entries. I felt that having two entries showing is enough. Too many entries and people would have to scroll down lots. So I thought of have the user choose if he/she wants to see the previous entries. So I decided to use the drop down method. Save space and time scrolling. __________________ If you think TSF have helped you, please kindly donate to TSF and help keep this site free to all.

10-11-2006, 07:56 PM	#20 (permalink)
DJ-Zep Design Team Join Date: Mar 2006 Location: Philadelphia Posts: 1,541 OS: Windows Vista Home Premium (x64) My System	Ahh I see. In blogs thta I've seen, they usually just have an archives section that splits it up into categories. Once you start posting blogs every week, there will most likely be too many to display on one page for anyone to care to read about. I'm not forcing but recommending you use an archives section on your site. __________________ Nice music blog Nvu \|\| Notepad++ \|\| Apache \|\| PHP \|\| Keep TSF Alive "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier."