FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


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

<!-- Keep all menus within masterdiv-->
<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:

Code:

<html>
<body bgcolor="black">

<a href="#SEC1"> Section 1 </a> <BR>
<a href="#SEC2"> Section 2 </a> <BR>
<a href="#SEC3"> Section 3 </a> <BR>
<a href="#SEC4"> Section 4 </a> <BR>
<a href="#SEC5"> Section 5 </a> <BR>

<div style="width: 100%; height: 200; visibility: visible; overflow: auto; scrollbar-3d-light-color:

#000000; scrollbar-arrow-color: #000000; scrollbar-track-color:black; scrollbar-base-color:black;

scrollbar-dark-shadow-color: #000000; scrollbar-highlight-color:black; scrollbar-face-color:black">
<font color="#00ff00">
<A NAME="SEC1"> 1 </A>

<br>
Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<A NAME="SEC2"> 2</A>

<br>
Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<A NAME="SEC3"> 3</A>

<br>
Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><A

NAME="SEC4"> 4</A>

<br>
Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><A

NAME="SEC5"> 5</A>

<br>
Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff... Stuff...

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>

             </div>

</body>
</html>
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
witney
Hello,
would you mind posting your solution with the html tags?

Thank you.
saberlivre
You could do something like hide the element containing the text using the style property display = 'none'. Then, using javascript, change the value to display = 'block' to display the element.
Related topics
*OFFICIAL* Which Browser do you use?
Create Web pages without knowing HTML.
[beginner] CSS Font property :
How To : Improve Your PHP Programming
Adding Music or Sound to Your WebsitE
FTP problems --> Use Filezilla and/or active mode
Win Xp Tip (Tried And Tested)
Broadband Internet access via TV cables (cud reach 100mb/sec
Script for text area with html support
A search to make JS file even smaller-2306byte to 542
Allowing any html tag in MediaWiki
html tag <table help?
PHP inside HTML tags?
INTERNET BASICS [(HTML)]
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.