Expand collapse HTML Tag

mike_phi

Hi all I need some help, I am trying to find a HTML Tag which I could use to collapse and expand a page containig Text.

Basicall anything would be fine a tre a kand of read "more...",

Problem statement
I have a Page that contains allot of information and not alll users would want to see all of the info I only want the first prargraph to be visible and have a "Read More ..." or some kind of expand colapse option.

Design Restriction
This page will be within a PHPBB fourum and I cannot load another html page into the topic when the topic is open and I dont want to redirect out of the topic I would like to dynamically just expand the text within the topic. Thats whay I was hoping to just use one HTML page laoded in the topic that would have the ability to be expandied and collapsed without redirecting it.

Terms explained:
PhpBB - for those of you that dont know what PhpBB is, just ignore this term and think of the problem as if I want to be able to expand and collapse text from within a sinlg Html page without redirecting.

any help would be appreciated

cheers Kind Regards Mic

Scorpio

Check if this works

http://www.dhtmlgoodies.com/

Check under misc scripts

burningjacks

your definitly going to have to use Dynamic HTML....im not really good with it try www.dynamicdrive.com

amadeotw

place this in the head section of your page:

<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}
</style>

<script type="text/javascript">

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>

this is the expand script so place this where u want to see it


<div id="masterdiv">

<div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div>
<span class="submenu" id="sub1">
- Your text here, just repeat again and again
to add more articles.<br>

</span>

</div>

UnderClassman

or you can skip all of that code and simply use inner links. I used the links in a few layouts I designed for some poeple. They worked pretty well. What you do is instead of haveing two pages or three pages, you have one. The links go to a place, specified by you, inside the html page. There is only ONE page, the links just take you to a part of that page. It works exactly like the FAQ on just about any self respected website. But here is the part where you need a little more than basic HTML skill.

In order for it to look like it is more than one webpage, you have to have a certain color scheme.

What you do is first make a div wide enough and long enough for your longest and widest paragraph. You set the color of the background to the color of your body's background. Backgrounds that have design will not work with this. You insert some CSS to make the color of the whole scroll bar the same color of the background.

You now have what looks like a big colored square. Your links will go directly around that box. Placeing them below or to the side of the box is better. Now, type in your sets of paragraphs, put enough breaks in between each set to make it look like you have a blank colored box again when you scroll down. With every paragraph, put in a base link. This is how you will see the paragraphs. Each link will take you to a different part of the div.

EX:

mike_phi

Hi and thank all of you that have replied you really have been a great help I really really appriciaite the input.

I am glad to say I have tried out all the above listed options and thay are all fantastic solutions.

FeedBack on the Javascript and dhtml Misc scripts

for the first two, i.e. the Javascript and the dhtml misc sripts it worked perfectly and looked elegant, I however could not include Javascript in the phpbb (provided with PhpNuke) so I was forced to write Htlm module which would handle all the tags and therefore I havd to redirect my readers away from the forum inorder to show them more information, the redirecting away and having to write an extra html handeling module due to limitations by phpbb tags was the Sad

part of these solutions but if I adopt the redirecting option then these solution are faaaantaaastic.

FeedBack on the innner links

Here was the solution that hit closest to home and phpbb was happy to load all the tags required so this gave me a Very Happy

, the solution worked exactly as it is presented here as if it where running outside phpbb. the Sad

to the solution is that the forum entry is still long so navigability is increasd but the forum topic entry still fills the page when this topic is expanded.

Wish List Nice to have
- if this inner link solution could somehow hide the entries that are not chosen and only open them when clicked on hence keeping the post short.
- if someone knowns of a whay I could include javascript or html in the phpbb forum module, even if it means modifying the php code thats fine I can go in and do a fix.

I would like to take the chance to give yee all yet another big thank you as your solutions have helped me its just up to me to cut my losses in terms of looks and funtionality and chooses one of the solutions to use on my site.

cheers to all, Mic