I have a table that shows results from a database. One of the fields is a memo field that can be quite long. So, I am using some javascript to display just the first 50 or so characters. What I would like to do now is add a link at the end that the user can click to display the full field and then when the full field is displayed have another link that they can click to collapse it down again. I have seen this done quite a few times, but don't know how to do the collapse/expand part. Any thoughts?
Ultimater
08-28-2005, 01:53 PM
A snippet:
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
Very handy script, thank you. I have the following related question. As written, the blah blah blah texts are displayed in full by default. Any suggestion how to reverse the default so that just an introductory line of text is displayed followed by (or preceded by) the button? For example:
[Toggle button] Click TOGGLE to expand/collapse submission instructions...
[Toggle button] Click TOGGLE to expand/collapse driving instructions...
[Toggle button] Click TOGGLE to expand/collapse FAQ...
TIA for any assistance,
Bob
Mr J
01-02-2006, 03:39 AM
Change the P tags to Div tags, add style="display:none", wrap all but the first line within the div tags
First line First line First line First line First line First line First line First line First line
<div id="para1" style="display:none">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
<br>
<input type="button" onclick="return toggleMe('para1')" value="Toggle">
<br>
devbob
01-02-2006, 06:41 AM
Excellent! Thank you, that's perfect.
Why anyone would know such things always fascinates me but that's stuff for an entirely different thread. :D
Wishing you and All a very happy New Year!
Bob
Mitch074
01-13-2006, 08:31 AM
...if you forget to use a different ID for any element in a single page: you can't use the same ID for several elements.
Great one!
Bryan G
02-02-2006, 07:12 AM
I was debating on what to search, this or Google, i used Google and still ended up here, just what I wanted but without the buttons, works great.
I have a question, can this be done without javascript?
Ultimater
04-16-2006, 04:56 PM
I've been getting too many PMs concerning http://javascript.internet.com/miscellaneous/expand-collapse-paragraph.html
which has a link to this thread. Perhaps others will encounter this thread after they decide to check out the Contributor URL.
Once and for all, you can have as many buttons as you wish on the page. You can put the buttons anywhere on the page you wish -- it doesn't have to be right-next-to the paragraph it will toggle. The button "knows" which paragraph to target via the ONCLICK event handler. ONCLICK="return toggleMe('para1')" would target the paragraph with the ID="para1"
<div>
<input type="button" class="button" onclick="return toggleMe('para1')" value="Are the JavaScripts here free?">
</div>
<div id="para1" style="display:none">
Yes, all the scripts on this site are free for personal or business use. The only requirement for using them is that you leave the credit information inside the script.
</div>
<div>
<input type="button" class="button" onclick="return toggleMe('para1')" value="Are the JavaScripts here free?">
</div>
<div><br></div>
<div>
<input type="button" class="button" onclick="return toggleMe('para2')" value="What is JavaScript? Is it the same as Java?">
</div>
<div id="para2" style="display:none">
JavaScript is NOT Java. JavaScript is a basic scripting language that allows Web authors to create dynamic pages that react to user interaction.
</div>
<div>
<input type="button" class="button" onclick="return toggleMe('para2')" value="What is JavaScript? Is it the same as Java?">
</div>
</body>
</html>
pixelchick
04-16-2006, 11:11 PM
I am trying to do the same thing as above only with a slide in/out tab. When the page loads the tab with information is showing, when the user clicks on the lower corner to close the tab it slides up so that only a small corner is showing. When they click on the tab again, the entire tab is visible again. This is what I currently have:
Something like this?
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.margin=='-120px 0px 0px 0px'){
e.style.margin='0px 0px 0px 0px'}
else{
e.style.margin='-120px 0px 0px 0px'
}
return true;
}
</script>
<body style="margin-top: 0px; margin-left: 0px;">
<div style="width:500px;height:200px; background-color:blue;color:red;">line 1<br />line 2<br />line 3<br />line 4<br /></div>
<div id="Td1" style="background: url('popup.gif') no-repeat top left; height: 120px; width: 264px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;">
Volume discounts available when ordering Karyotype and SingatureChip® microarra combination.<br /><a href="">Please click here for more details</a>
</div>
<div><img alt="" onclick="return toggleMe('Td1');" border="0" height="20" hspace="0" src="tab.gif" width="50" vspace="0" /></div>
dvs
05-09-2006, 10:41 AM
Hi. New to this forum. Have an issue and rather than start a new thread thought I would post it here as it seems most relevant.
I have a FAQ page which has about 50 questions. I thought I would use a expand/collapse script as it's the most easiest to view. Each question is a link to the answer (rather than a button or graphic). All works well except uthe user is returned to the top of the page when the question expands. You don't notice it on the first set questions but it is annoying for the questions that are further down the page.
I am using the following code for the questions:
<div class="navBar"><a href="#" onclick="reveal('S01')">
What is the question?
</a></div>
<div class="S01" id="S01" style="display: none;">
This is the answer
</div>
When I use the above code with a button or graphic, it works fine. Just when using <a href='#'> it seems to only want to return to the top of the page (although it does open question). Any ideas?
Mr J
05-09-2006, 03:09 PM
Add return false to your link
<a href="#" onclick="reveal('S01') ; return false">What is the question?</a>
<div class="question" onclick="reveal('S01')">
What is the question?
</div>
dvs
05-09-2006, 07:05 PM
Thanks for reply. That kinda worked in that the answer appears on screen and it doesn't make you return to the top. However, the only problem is that the answer appears befor the question once revealed. Any suggestions?
eg.
A. This is the answer
Q. What is the question?
A. This answer is 10
Q. What is 5 + 5?
Mr J
05-10-2006, 09:02 AM
Post the code you are using
dvs
05-11-2006, 08:55 AM
Post the code you are using
<script type="text/javascript">
function reveal(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}
</script>
In the body:
<a href="#" onclick="reveal('S81'); return false">
What is 5 + 5?
</a>
<div id="S81"; style="display:none">
<p>
10
</p>
</div>
dvs
05-12-2006, 07:59 AM
anyone?
Mr J
05-12-2006, 09:16 AM
I tried your code and it gave me
Question
Answer
in that order?
dvs
05-12-2006, 11:59 AM
Doh. So it does! I tried the code in a new document and it worked fine. There must be something in the original document that was causing the error - With over 500 lines of code, I think I'll just start again!
Thanks for your help!
ritu138
05-30-2006, 01:08 AM
Hi All,
I'm kind of new to JavaScript, JSP and DHTML.
I went through the solution posted by Mr. J and Ultimater in the beginning.
I have a query about that.
What if we have different form elements (like text boxes, labels, combo, etc) instead of only text (By text, I'm referring to "blah blah content").
Can we expand and collapse the page in the similar fashion which will now show and hide various form elements????
Actually, my main motive is as follows...
A JSP page has around 10 fields in all.User is reqd to compulsorily fill in 5 fields to proceed to next page.
Hence, page is divided in 2 parts, Basic and Advanced.
When page first loads, only the first 5 Basic fields are visible, along with a button "Advanced".When user clicks on "Advanced" all 10 fields are displayed, with button "Basic".On clicking "Basic", first 5 fields visible.
There is only one request through which we come to this page, and there is only one request which we have to send at the end to the servlet (when user clicks button "Submit Form").
Then there are cases when the user fills values in the form and clicks "Advanced".We need to retain those values also when displaying the page.
Can anyone please guide me?
Mr J
05-30-2006, 08:59 AM
See if this help you
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
Hi. New to this forum. Have an issue and rather than start a new thread thought I would post it here as it seems most relevant.
I'm new to Javascript and I've got code here that expand/collapses certain links that I've place under a category(note: there are some free links without categories). The plus image is there when page loads but minus/plus aren't there if you want to collapse/expand...the red x appears in its place. What am I doing wrong? :confused:
<li id="PI Global Compliance(old specs)"> <IMG id="PI Global Compliance(old specs)" alt="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/bullet.gif" border=0> <a href=http://workplace/pi/default.asp?B1=Agree" > PI Global Compliance (old specs)</a></li>" > PI Global Compliance (old specs)</a></li>
</ul>
</span></LI></UL></LI>
Mr J
06-07-2006, 08:53 AM
Take out all the redundant </span></LI></UL></LI> tags, see if that helps
ejimadam
06-08-2006, 04:58 PM
Hey Mr J
I took out only the extra </LI> because when I took out the whole thing different categories merged into each other. Taking out the extra </LI> reduced the spacing between categories, however there is excess spacing between the category heading and the first listed link. I'm not sure why that occurs.
ejimadam
06-13-2006, 09:57 AM
anyone?
bradlewis
06-13-2006, 03:08 PM
I am trying to use 1 button to expand and collapse multiple <div> tags.
Currently I'm able to expand and collapse just 1.
If I have multiple <div> tags with same ID, it does not work.
Any suggestions?
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
<div id="text1" style="display:none">
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
</div>
<p>Some more text and tags in between the first blah and second blah</p>
<div id="text1" style="display:none">
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
</div>
bradlewis
06-13-2006, 03:20 PM
<script type="text/javascript">
function toggleMe(a,b){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
var f=document.getElementById(b);
if(!f)return true;
if(f.style.display=="none"){
f.style.display="block"
}
else{
f.style.display="none"
}
}
</script>
<div id="first1" style="display:none">
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
</div>
<p>Some more text and tags in between the first blah and second blah</p>
<div id="second1" style="display:none">
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
</div>
<div id="first1" class="toggle">
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
</div>
<p>Some more text and tags in between the first blah and second blah</p>
<div id="second1" class="toggle">
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
</div>
icechyi
06-19-2006, 12:54 AM
How may I make the expanded text expand some more?
I'm trying to make something like this.
Number 1
->Part (a)
--->Question (i)
--->Question (ii)
->Part (b)
--->Question (i)
--->Question (ii)
(and so on)
icechyi
06-19-2006, 05:26 AM
oh. i just found out. i just had to change the para1 to para2 and so on.
xD
logoclick
10-29-2008, 05:42 AM
Hi I am very new to forums, I found your info regarding: Expand/Collapse Paragraph, etc.
I have a website with a orderform and I would like to be able to Expand/Collapse my orderform page, right now I have 5 order areas on the page for ordering up to 5 products. I would ike to have say just the top one appear between the yellow bars and have a button that says: "Add Another Item" then another order area would appear, ie, Item #2 (optional) Item #3 (optional) etc.. is that possible to do with my form...? Here is a link to my order page: http://www.logoclick.com/order/
vwphillips
10-29-2008, 08:38 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
function Init(id){
var table=document.getElementById(id);
var tbodies=table.getElementsByTagName('TBODY');
for (var zxc0=0;zxc0<tbodies.length;zxc0++){
var rows=tbodies[zxc0].getElementsByTagName('TR');
for (var zxc0a=0;zxc0a<rows.length;zxc0a++){
rows[zxc0a].style.display='block';
}
if (zxc0>0){
tbodies[zxc0].style.display='none';
}
}
}
function More(obj,cls){
var table=obj;
var tbody;
while (table.parentNode){
if (table.nodeName.toUpperCase()=='TBODY') tbody=table;
if (table.nodeName.toUpperCase()=='TABLE') break;
table=table.parentNode;
}
if (tbody.nodeName.toUpperCase()=='TBODY'&&table.nodeName.toUpperCase()=='TABLE'){
var tbodies=table.getElementsByTagName('TBODY');
for (var zxc0=0;zxc0<tbodies.length;zxc0++){
var rows=tbodies[zxc0].getElementsByTagName('TR');
for (var zxc0a=0;zxc0a<rows.length;zxc0a++){
if (rows[zxc0a].className&&rows[zxc0a].className==cls){
rows[zxc0a].style.display='none';
break;
}
}
if (tbodies[zxc0]==tbody&&tbodies[zxc0+1]){
tbodies[zxc0+1].style.display='block';
return;
}
}
}
}
/*]]>*/
</script></head>
So I can hide this row by going $('.hidden').toggle(); but this hides both the rows when I only want to hide the first row, not both. Is there a way to get the id of the element so that I can go something like ($(this).id).toggle() This ^ gives me an error but I need to be able to do something similar. Any help on this would be greatly appreciated
Thanks
AlaNio
03-25-2009, 09:08 AM
Hi, i'm working on an XML transform and i'd like to do exactly the same thing but without buttons. I can get it to work with a href but I want to be able to change the text that the href is displaying for example :
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if (e.style.display == "none") {
e.style.display = "block"
I tried using e.innerHTML to change the Heading value but it doesn't like that, it just prints out when the menu is expanded and not the actual paragraph.
Thanking j00
vwphillips
03-25-2009, 12:34 PM
<script type="text/javascript">
function toggleMe(a){
var evt=window.event||arguments.callee.caller.arguments[0];
var obj=window.event?evt.srcElement:evt.target;
if(obj.nodeType==3) obj=obj.parentNode;
var e=document.getElementById(a);
if(!e)return true;
if (e.style.display == "none") {
e.style.display = "block"
obj.innerHTML=obj.innerHTML.replace('-','+');
}
else {
e.style.display = "none"
obj.innerHTML=obj.innerHTML.replace('+','-');
}
return true;
}
</script>
larsen1492
04-07-2009, 03:06 PM
it's very easy with a simple javascript. here is an example:
http://n1scripts.com/javascripts/javascript_show_hide_content_toggle_div_visibility?show=scripts&id=12
bantam
08-14-2009, 01:10 PM
Hi, I'm new to this forum and find it very helpful. I've also found the original expand/collapse JS (that started this thread) very helpful as well as I've just starting to teach myself HTML and web page development.
The web pages are organized along the lines of chapters in a book, following a table of contents organization where the reader can go deeper and deeper into an area as they wish. And so I've used the expand/collapse feature extensively throughout the web pages I've made so far. Each page covers a broad topic area, but within each specific topic areas are initially in a "collapsed" form until the reader clicks further on a topic to see it in an expanded form. And so "expansion" of a topic area only occurs via the onclick approach for the blocks of info associated with the relevant ID label used in the ToggleMe function.
At the same time however, I'd like to create an index page (like in the back of a reference book) where a user could select a specific topical item from an indexed list, and the link would take the user to the relevant web page, and section of the page with that particular information would already be in the "expanded" mode. In this scenario, the reader would not have to click any further to get to see the fully expanded piece of information.
I hope this is understandable and wonder if anyone has any technical advice on how to do this.
Thanks -- Mark.
jdryden
04-04-2010, 07:00 PM
Quick question: If I have three of these hidden <div>s on one page, every time the user shifts from one "tab" to another, how do I make the others disappear until the user clicks on their button again?
vivaissy
06-20-2010, 06:40 AM
A snippet:
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
Thanks for this code - it works great!
I'm having a bit of trouble adding a expand all/collapse all button at the top of my page. I've looked on other websites, but obviously they don't follow the same code!
Is there an easy way of doing it cos I can only get it to show all toggle buttons or hide all toggle buttons and not the detail in each one.
Hope this makes sense!
TIA x
vwphillips
06-21-2010, 04:19 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Hello, I am new to this section and managed to work the actual thing first time thanks to the good thread it is,
But on my Menu people will set what they want collapsed etc and what they ont, but as soon as they click onto a new page all the menu just uncollapses again? meaning its pointless to use seeing as you wont be on one page for that long.
How can i stop this happening?
studysupport
09-16-2010, 07:09 AM
Hi all
Working with students and developing a site using some of the very useful above code.
<div>
<input type="button" class="button" onclick="return toggleMe('para1')" value="Are the JavaScripts here free?">
</div>
<div id="para1" style="display:none">
Yes, all the scripts on this site are free for personal or business use. The only requirement for using them is that you leave the credit information inside the script.
</div>
<div>
<input type="button" class="button" onclick="return toggleMe('para1')" value="Are the JavaScripts here free?">
</div>
<div><br></div>
<div>
<input type="button" class="button" onclick="return toggleMe('para2')" value="What is JavaScript? Is it the same as Java?">
</div>
<div id="para2" style="display:none">
JavaScript is NOT Java. JavaScript is a basic scripting language that allows Web authors to create dynamic pages that react to user interaction.
</div>
<div>
<input type="button" class="button" onclick="return toggleMe('para2')" value="What is JavaScript? Is it the same as Java?">
</div>
</body>
</html>
We are using this code as we can easily style the headers. Can you suggest ways we can align the headers, to the right for instance.
Thank you.
tjfoz
12-30-2010, 03:09 PM
Hey All,
I am using this idea to close a footer on a php site. My issue is that once I click a link to a different page, the footer displays again. How can I keep the display set to none? Any ideas are very appreciated!
Thanks!
xironet
02-15-2011, 05:48 PM
Hi,
I have tried the script given here for expanding / collapsing text. It works fine, however, having a button is not really nice. I would rather to have a text instead of the button, showing the first line of the text and once you click on the text title, it expands to show the whole text. like this:
This is the title which is clickable
This is the first line of the text which shows by default
This is the bla bla bla blabla section which shows after clicking on the clickable line.
Can anyone suggest how to modify the script given here to do the task I mentioned.
Many thanks in advance.
<body><!-->
<a href="javascript:void();" onclick="return toggleAll('para')">show all</a><br><!-->
<a href="javascript:void();" onclick="return toggleAll('para',true)">hide all</a><br>
<a href="javascript:void();" onclick="return toggleMe('para1')">Treatment in the UK<br>
Treatment in the UK is one of the best in the world.
<p id="para1">
Treatment in the UK is one of the best in the world.blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</p>
<br>
</span>
</body>
</html>
And this is what I get in browser:
show all
hide all
Treatment in the UK
Treatment in the UK is one of the best in the world.
Treatment in the UK is one of the best in the world.blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
Now, line, Treatment in the UK & Treatment in the UK is one... are joined together. The first Treatment in the UK is what I wrote in the title and the next line is my first line which should show by default. Once I click on the "title" the first line shoul expand and show the blahblah section. It doesn't quite work that way.
You have the full code perhaps you can see it for yourself.
Many thanks in advance.
Regards,
Hamid
tjfoz
02-17-2011, 08:56 AM
OK, try this. I changed the <p id="para1"> to a div instead and included the first sentence inside just a standard <p> tag.
<code>
<body><!-->
<a href="javascript:void();" onclick="return toggleAll('para')">show all</a><br><!-->
<a href="javascript:void();" onclick="return toggleAll('para',true)">hide all</a><br>
<a href="javascript:void();" onclick="return toggleMe('para1')">Treatment in the UK<br>
<p>Treatment in the UK is one of the best in the world. <div id="para1">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</div>
</p>
<br>
</span>
</body>
</code>
xironet
02-22-2011, 03:26 PM
Hi Dear,
Many thanks for your help, it is great. It works fine with a slight problem. I have actually uploaded the site in a dummy domain I have for you to see. Please go to :
http://www.kouroshamini.co.uk/treatment.html please use exact link.
Problems that I see are:
1-The text colour has changed to red.
2- The lower paragraphs depend on the top one. In other words, when I click on paragraph 3, it hides or open parageraph 4. Similarly, clicking parageraph 2, hids/show parageraphs 3 and 4, and so on.
I copy the bit of code I have for you here:
<a href="javascript:void();" onclick="return toggleMe('para1')">Treatment in the UK</p>
<span lang="en-gb">
<p>Treatment in the UK is one of the best in the world. <div id="para1">
<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<a href="javascript:void();" onclick="return toggleMe('para2')">Treatment in Europe<br />
<p>Treatment in Europe is one of the best in the world. <div id="para2">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<a href="javascript:void();" onclick="return toggleMe('para3')">Treatment in US<br />
<p>Treatment in Europe is one of the best in the world. <div id="para3">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<a href="javascript:void();" onclick="return toggleMe('para4')">Treatment in Asia</p>
<p>Treatment in Europe is one of the best in the world. <div id="para4">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div>
</div>
</div>
By the way on the top of the page I have some Javascript code which I mention here, not sure if they are relevent:
This should fix the issue with the paragraphs hiding. The </div>s need to be after each paragraph as below to tell the page where each paragraph ends:
<a href="javascript:void();" onclick="return toggleMe('para1')">Treatment in the UK</p>
<span lang="en-gb">
<p>Treatment in the UK is one of the best in the world. <div id="para1">
<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p></div>
<a href="javascript:void();" onclick="return toggleMe('para2')">Treatment in Europe<br />
<p>Treatment in Europe is one of the best in the world. <div id="para2">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p></div>
<a href="javascript:void();" onclick="return toggleMe('para3')">Treatment in US<br />
<p>Treatment in Europe is one of the best in the world. <div id="para3">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p></div>
<a href="javascript:void();" onclick="return toggleMe('para4')">Treatment in Asia</p>
<p>Treatment in Europe is one of the best in the world. <div id="para4">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p></div>
As for the text turning red, that must have something to do with the stylesheets that are included (style.css and layout.css). Check in there to see if there is code that sets the font color to red. Best of luck!
xironet
02-26-2011, 06:18 PM
Hi,
Thank you very much, you are a star. There is a small hicup though. Everything works perfect apart from the fact that when the page is loaded or shows, all the text is in expansion mode. Ideally it should be in closed format until the user clicks on link to expand his requiered link.
Look forward for your help. You can see it live on the site.
Regards,
Hamid
Floorguy
03-02-2011, 11:06 AM
....but it brought me here from a google search.
Rather than start a redundant thread I assume it is best to bring this one back to the top.
I used the methods suggeste here to set a collapsing paragraph, I thank you it worked great, however when I try to place more than one the second one will not work.
I changed the para value to 2 on the second one, it does engage the primary, it is seperate at the bottom of the page.
Can anybody advise, does it have to flow with the primary?
If not how should it be wrote?
I use VWB 2010 Express .net developer with .aspx extensions
xironet
03-02-2011, 12:33 PM
Well! I am not much of expert on this and I learnt it here from tjfoz who is brillient and I must say I still have a little issue with it. Mine works and all you have to do is to copy and paste the code above, dated 02.23.2011 from tjfoz. I don't think having aspx or html extension will make any difference, because you are using javascript for this which will work with .NET happily.
Anyhow, good luck.
Hamid
Floorguy
03-02-2011, 03:58 PM
I realized that this thread has been updated recently after I set my first post, I tried to modify but I did not see that option.
Here is what I trying:
<input para1..... blahblah ect /span> works great
Text with other information about other things.
<input para2....blahblah ect /span> the second setting does not work
Does this explain my problem better?
xironet
03-03-2011, 06:47 AM
Ok, do what I did, creat a simple blank html page and then copy / past the code below. It works fine. Then transfer the code into your original file bit by bit and find where it goes wrong. Creating a simple file and testing the actual code in it will make you confident that your original code is OK and works, then you can start troubleshooting as soon as you move it over to your aspx file. Let me know how it goes.
<body><!-->
<a href="javascript:void();" onclick="return toggleMe('para1')">My first text here</p>
<span lang="en-gb">
<p>A brief note about my first text here. <div id="para1">
<p>Full text about my first text here ...blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p></div>
<a href="javascript:void();" onclick="return toggleMe('para2')">My 2nd text here.<br/>
<p>A brief note about my 2nd text here<div id="para2">
Full text about my 2nd text here ...blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p></div>
<a href="javascript:void();" onclick="return toggleMe('para3')">My 3rd text here<br />
<p>A brief note about my 3rd text here. <div id="para3">
Full text about my 3rd text here ...blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p></div>
<a href="javascript:void();" onclick="return toggleMe('para4')">My 4th text here</p>
<p>A brief note about my 4th text here. <div id="para4">
Full text about my 4th text here ...blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p></div>
</div>
</div></span>
</body>
</html>
sargeants
03-04-2011, 10:46 PM
Just for those who are having issues with the font being all red...and not working for the second and third links, it's because the <a> tags aren't being closed... so it's making everything a link.
here's a revised code for everyone... hope it works for you, cause it works for me. I came across this while searching for some jquery stuff... but surprised no one caught the basic html error of no </a>. I didn't include the actual javascript stuff, cause that's fine; though I did add a class just cause it's helpful sometimes.
<body>
<a href="javascript:void();" onclick="return toggleMe('para1')">My first text here</a>
<div>A brief note about my first text here.<p id="para1" class="para">
Full text about my first text here ...blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p></div>
<hr>
<a href="javascript:void();" onclick="return toggleMe('para2')">My 2nd text here.</a>
<div>A brief note about my 2nd text here<p id="para2" class="para">
Full text about my 2nd text here ...blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p></div>
<hr>
<a href="javascript:void();" onclick="return toggleMe('para3')">My 3rd text here</a>
<div>A brief note about my 3rd text here. <p id="para3" class="para">
Full text about my 3rd text here ...blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p></div>
<hr>
<a href="javascript:void();" onclick="return toggleMe('para4')">My 4th text here</a>
<div>A brief note about my 4th text here. <p id="para4" class="para">
Full text about my 4th text here ...blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p></div>
awmperry
03-05-2011, 01:32 PM
Ultimater, Mr J - I know your original posts were from half a decade ago, but just thought I'd post a quick thanks. In combination, they gave me exactly the information I needed to make my CV work. Thanks!
badaboom
03-06-2011, 11:49 AM
Hi guys
I would need some help, am totally new in javascript, actually am waiting for my first javascript class to start by the end of the month. So I found this script here and it does almost what I would need. My needs are when I load the page I need to have all the links to collapsed, which is not the case with this script. And second, if it was possible when you click on one link to expand all other would automatically be collapsed. Could some help me out and just give some explanation on what is added so can start understanding this script. Thanks very much for any help.
The thing about sections starting collapsed is answered by Mr J on the first page - essentially, it involves adding a "display:none" style to each section.
Another question occurs to me... I'm using a small JPG (expand.jpg) to indicate that a section can be expanded. Is there any easy way to switch it to another image (called, for the sake of argument, collapse.jpg) when the section's expanded and back again when collapsed?
LouPhi
03-28-2011, 11:47 AM
I'm using this script, but want the expanded text to continue on the same line as the text already on the screen... at the moment the script is putting a line break <p> in so that the continuing text appears to be a new paragraph..
Can anyone help with this please? I'm guessing I need to change something in the
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
Also - each toggle I'm using, when clicked returns the page to the top - so the reader has to scroll back down to the text they were reading..... something to do with the <a href="#"> I'm guessing... but how to stop this please?????
awmperry
03-28-2011, 01:20 PM
You don't actually need the <a> at all; it's the onclick= bit that's important, and you can put that on anything. On my CV, for instance, I have something along the lines of
<h3 onclick="return showhide('history')">Employment History</h2>
<div id="history">INSERT EMPLOYMENT HISTORY HERE</div>
That way simply clicking the header will show or hide the text. If you want it in line, I suspect it'll be enough to simply use <span> instead of <div>.
LouPhi
03-29-2011, 05:50 AM
Thanks - removing the <a href> has helped with the page jumping.... I also replaced <div> with <span> but the expanded text is still appearing on a new line (with no line break inbetween, so its a bit better, but still not perfect!!)
Any other ideas??
awmperry
03-29-2011, 08:13 AM
Do you have it on a new line in the code? I'm just guessing wildly at this point, but perhaps something like this would work?
<p><font color="blue" onclick="return showhide('hiddenstuff')">Click here</font><span id="hiddenstuff"> to show this</span.
Could that work?
LouPhi
03-30-2011, 05:13 AM
No that doesn't help.... here's an example of the code which I'm trying to get to continue on the same line
avionics area is just being realised, <span onclick="return toggleMe('para1')" value="Toggle" class="texthighlight">more/less»</span><span id="para1" style="display:none">future air traffic management
and a link to view the page: http://www.gps-world.biz/avionics.php
and its the first more/less>> on the page that I've shown you......
awmperry
03-30-2011, 05:37 AM
I see what you mean. Needs someone more knowledgeable than me to answer that - using the hide code on my website CV last month is my first foray into this sort of thing.
Incidentally, my dad works with GPS, GNSS, SESAR and whatnot...
irf2k
03-30-2011, 02:45 PM
Another question occurs to me... I'm using a small JPG (expand.jpg) to indicate that a section can be expanded. Is there any easy way to switch it to another image (called, for the sake of argument, collapse.jpg) when the section's expanded and back again when collapsed?
Pretty simple, really. Just a modification to the original function:
<script type="text/javascript">
function toggleMe(a, b){
var e=document.getElementById(a);
var f=document.getElementById(b);
if(!e || !f)return true;
if(e.style.display=="none"){
e.style.display="block";
f.src="collapse.jpg";
}
else{
e.style.display="none";
f.src="expand.jpg";
}
return true;
}
</script>
Then, when you call the function toggleMe, you ALSO need to add the ID of the img as the second parameter.
irf2k
03-30-2011, 02:51 PM
@LouPhi
Currently in ToggleMe, the display format is being changed to "block". This means, by default, that a new "block" of text is created (hence, a new line). To display it in the same line, change
e.style.display="block"
to
e.style.display="inline"
You can read up on all the possible display formats here:
http://www.w3schools.com/css/pr_class_display.asp
LouPhi
03-31-2011, 05:17 AM
Thanks irf2k, that seems so obvious now you've told me :)
I love the idea of changing the 'expand' to 'collapse' once the text is expanded, so I'm also trying your solution to awmperry regarding swapping the image... can you please (as I'm not technical in any way shape or form!) explain what you mean by 'add the ID of the img as the second parameter'?
And I'm assuming I need to add something to the <span id="para1"....> part?
Thanks for your help with this...
irf2k
03-31-2011, 10:53 AM
Close...
the original <span id="para1"...> stays the same. That ID is there so that we can reference it (hence, you can only use the id "para1" once in a page, otherwise it gets confusing)
so, if we want to talk about the image, we need to give it an id as well. so this:
<img src="http://www.chronos.co.uk/images/expand.jpg" width="37" height="11" alt="" />
becomes this:
<img src="http://www.chronos.co.uk/images/expand.jpg" width="37" height="11" alt="" id="img1" />
Now we come to "adding the id of the image as the second parameter".
The function toggleMe only had one parameter (a), and we have added a second one, so it is now (a, b)
When you call the function like you currently do:
<span onclick="return toggleMe('para1')"
It will not work, because it expects TWO values, para1 and something else, so we put:
<span onclick="return toggleMe('para1', 'img1')"
And of course, if you're using this more than once on a page, the next paragraph would be id='para2' and the next img would be id='img2'.
nonsub
06-06-2011, 10:03 AM
Hi guys. Thanks for these scripts.
I would like a way to do allow only one "question" expanded. Only the question clicked should display, when another question is clicked it should collapse this one and open the next...
Thanks!
nonsub
06-06-2011, 10:40 AM
Hi guys. Thanks for these scripts.
I would like a way to do allow only one "question" expanded. Only the question clicked should display, when another question is clicked it should collapse this one and open the next...
Thanks!
I see some of the posts should have at least pieces of this I can start trying with. To be more clear here is what I want to do.
a) On page load, nothing should be expanded
b) Questions 1, Questions 2, Questions 3.... etc.
c) When QuestionX is clicked it should apply a style to the clicked question, and expand it BELOW the list of questions and also jump to the start of that particular answer
d) Close/return should close the expanded answer and jump back to the top of the question list
lol thanks
nonsub
06-06-2011, 12:05 PM
Well since no one answered me in 10 mins, I did it myself :P
a) Is there a way to get the divs to not "stack" spacing? ie. Each active "Answer" should start in the same spot not shifted down like they are here.
b) Any better way / more efficient code for this?
Thanks again!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
What version of the code in this long thread are you using? Post #63 or something modified since then?
Answered your own question while I was typing mine.
JMRKER
06-06-2011, 01:41 PM
Looking at your code I don't understand how you got it to work without a lot of luck...
In your funciton allOff(), you are expecting 2 parameters, but in the calls to the function you only supply one.
You're pretty lucky that the 'a' parameter always evaluates to false or you would have a problem with the ternary logic.
If you don't plan on using the missing 'a' parameter, then you could just set the display='none' instead.
JMRKER
06-06-2011, 02:10 PM
Slightly simplified version without the unused parameter(s)...
Also removed the extra <br> tags that were causing the answer area to scroll down.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Expand-Collapse FAQ</title>
BTW: You should use the [ code] and [ /code] tags (without the spaces) to make your script
a little easier to read and evaluated when you post on this forum.
nonsub
06-06-2011, 03:51 PM
lol yeah @ luck. I started mixing in variables and it broke. Thank's so much for rewriting.
a) You missed a </p> tag at the end?
b) I think there has to be a better method than letting the answersection display first and then allOff because with slow server + lots of content it will flash on the screen for a second then disappear?
nonsub
06-06-2011, 03:53 PM
in fact I have a feeling this could be accomplished just with css?
JMRKER
06-06-2011, 05:08 PM
lol yeah @ luck. I started mixing in variables and it broke. Thank's so much for rewriting.
a) You missed a </p> tag at the end?
b) I think there has to be a better method than letting the answersection display first and then allOff because with slow server + lots of content it will flash on the screen for a second then disappear?
<p> not really necessary and </p> not needed in HTML, only xhtml
I don't see any blinking answer displays, but if you do then just put in :eek:
Makes the "onload=..." un-necessary, but you still need the allOff() function elsewhere.
in fact I have a feeling this could be accomplished just with css?
Just wait, the feeling will go away. :D
nonsub
06-11-2011, 04:29 PM
Thanks again. Yeah I think it makes sense that on a slow host all the answers will first get listed then they will disappear no? Anyway removing the onload and replacing with the display:none works perfect.
One more question. With dynamic content I am using a header and that is where I put your function. If a page is loaded that has no answerSection elements there is a js error of course. The easy fix is a <div id="answerSection"> in the header, but what is the "proper" programatic way to do this?
Maybe enclose it in: if (document.getElementById('answerSection') != null) {....}
?
JMRKER
06-11-2011, 04:41 PM
Comments in RED below:
Thanks again. Yeah I think it makes sense that on a slow host all the answers will first get listed then they will disappear no?
Yes, that is true.
Anyway removing the onload and replacing with the display:none works perfect.
One more question. With dynamic content I am using a header and that is where I put your function. If a page is loaded that has no answerSection elements there is a js error of course.
Why does this condition exist? Why would you load a page that did not have the answers?
The easy fix is a <div id="answerSection"> in the header, but what is the "proper" programatic way to do this?
Putting any HTML code in the <script> portion of the <head> section will cause an error.
If needed, put it where you want in the <body> section
One possibility, is to hide the answer section and only displays if you have questions???.
Maybe enclose it in: if (document.getElementById('answerSection') != null) {....}
?
aroguespirit
10-06-2011, 12:40 AM
Thanks for the code. :) The only issue I am having is starting it collapsed instead of expanded. Would anyone assist me in altering the original code? Thanks!
aroguespirit
10-06-2011, 01:02 AM
Never mind. Answered my own question. ;) Thanks for the script!
jameson_eddie
10-12-2011, 03:26 PM
Ok, so I have an XHTML page with JS using expand/collapse functionality and am needing to find a way to include a search field that will search within the document without needing to expand the sections.
It would then highlite the sections and content matching the criteria in the document/page.