# Click to expand.



## dorts (Mar 17, 2006)

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. :grin:










After clicking on the text/button...


----------



## Comtrad (Sep 21, 2006)

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 (Mar 11, 2006)

I found this script on dynamicdrive.com.

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

```
<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:

```
<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 (Mar 17, 2006)

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 (Mar 17, 2006)

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

http://dorts.50webs.com/


----------



## DJ-Zep (Mar 11, 2006)

My apologies, dorts.

The correct code is:

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


----------



## dorts (Mar 17, 2006)

Nope. Still doesn't work. :grin:


----------



## DJ-Zep (Mar 11, 2006)

I know what's wrong :grin:

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


----------



## dorts (Mar 17, 2006)

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


----------



## DJ-Zep (Mar 11, 2006)

Read my edited post. :grin:


----------



## dorts (Mar 17, 2006)

You are GREAT DJ-Zep!!!! Work great!! :grin: I will definitely credit you in my webpage!

1 minor problem thought, :grin: My date is not aligned. 

http://dorts.50webs.com/

Click on Read More and check it out. :smile: You will know what I mean.


----------



## DJ-Zep (Mar 11, 2006)

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


----------



## dorts (Mar 17, 2006)

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


----------



## DJ-Zep (Mar 11, 2006)

dorts said:


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


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


----------



## dorts (Mar 17, 2006)

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


----------



## DJ-Zep (Mar 11, 2006)

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 (Mar 17, 2006)

But I would like to have a "blog entry" similar to the first or second. With the date and stuff. :grin: Is it possible?


----------



## DJ-Zep (Mar 11, 2006)

It might not because of how browsers interpret the span tag. I could give it a go. :grin: I just thought you need the full story to drop down instead of a totally new blog entry.


----------



## dorts (Mar 17, 2006)

Thanks for all the help and effort put in. :smile: 

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. :grin:


----------



## DJ-Zep (Mar 11, 2006)

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.


----------



## dorts (Mar 17, 2006)

I am also going to use the archives section. But I would just drop down maybe 2 previous entries that are from the same week.

Actually, it would be hard for me to maintain the archives, as I am not using any blogging software. So I would need to create many pages. :grin:


----------



## dorts (Mar 17, 2006)

So have you found a way to push the date down?


----------



## DJ-Zep (Mar 11, 2006)

I've been working on it. Please give me a couple days to figure this one out. Thank you.


----------



## dorts (Mar 17, 2006)

Sure. Thanks DJ-Zep. :grin: If there is no way to do it, then its ok. Just inform me. :smile:


----------



## dorts (Mar 17, 2006)

How is it going DJ-Zep?


----------



## DJ-Zep (Mar 11, 2006)

I've been going crazy trying to find a way to keep the date tab static but I just can't seem to. Sorry, dorts. I'll keep trying.


----------



## dorts (Mar 17, 2006)

It's fine DJ-Zep. :grin: I will find another way to present it. Thanks for all the help. :smile:


----------



## html user (Nov 8, 2008)

Hi, I want to thank you for sharing the tips on Click To Expand. I searched Google with the following phrase:

*html code to click expand drop down more text*

And your website returned just what I needed.
ray: Thank you so much!  xo

After I implement it, I will come back so you can tell me how it turns out for your browser's viewing. (If you don't mind helping! - and it seems you don't.):wave:


----------

