Need help with expand collapse part of displaying text

Hi,

I am new to the javascript and the ajax. I want to create a text and expand and collapsonly part of it . Something similar to what is done in youtube., I have this code.

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript">
function showBlock(blockId)
{
document.getElementById(blockId).style.display = "block";
}
function hideBlock(blockId)
{
document.getElementById(blockId).style.display = "none";
}
</script>
</head>
<body>
Show hidden text
<a href="javascript:showBlock('block1')"> expand</a>
<div id="block1" style="display: none">
This text can be hidden again if you click
<a href="javascript:hideBlock('block1')">collaps</a>.
</div>
</body>
</html>
[/HTML]

I have one problem I can not get rid from the "expand" when the text is expanded. Can some one help me to rid of the "expand when the text is fully exapanded so I will be left only with "collaps" .

Thanks
Ronen

Oct 3 '07 #1

Subscribe Post Reply

9543

acoder

16,027

Expert Mod 8TB

Welcome to TSDN!

Why do you want to display the same thing, but cut off on the "m" if the whole text is already displayed?

Anyway, you could do something like:
[HTML]<span id="toHide">Text that will be hidden on collapse</span>The rest of the text <a href="#" onclick="expandcollapse(this)">less</a>[/HTML] and the javascript:

Expand|Select|Wrap|Line Numbers

 function expandcollapse(anchor) {

 var span = document.getElementById("toHide");

 span.style.display = (span.style.display=='none')?'block':'none';

 anchor.innerHTML = (anchor.innerHTML=='less')?'more':'less';

}

Warning: not tested.

Oct 3 '07 #2

raknin

Welcome to TSDN!

Why do you want to display the same thing, but cut off on the "m" if the whole text is already displayed?

Anyway, you could do something like:
[HTML]<span id="toHide">Text that will be hidden on collapse</span>The rest of the text <a href="#" onclick="expandcollapse(this)">less</a>[/HTML] and the javascript:

Expand|Select|Wrap|Line Numbers

function expandcollapse(anchor) {

var span = document.getElementById("toHide");

span.style.display = (span.style.display=='none')?'block':'none';

anchor.innerHTML = (anchor.innerHTML=='less')?'more':'less';

}

Warning: not tested.

Thanks for the quick reply but unfortunaly it doesn't work. Can you check it.

Oct 3 '07 #3

acoder

16,027

Expert Mod 8TB

Oh, you must have edited your post after I posted.

Please remember to use code tags when posting code:

[CODE=javascript]
Like this for JavaScript code.
[/code]

Oct 3 '07 #4

raknin

HI acoder,

Yes indeed I edit it. and it is written in javascript. It seems that your code is written with some other languege. Can you send me your code in javascript.

Thanks
Ronen

Oct 3 '07 #5

Greg A

Thanks for the quick reply but unfortunaly it doesn't work. Can you check it.

raknin, I tested acoder's code in Firefox 2.0.0.7, MSIE6, and in Safari 3.0.3 Beta, and it works fine.

Oct 3 '07 #6

raknin

Thanks all,

but still the script has a problem. The problem is:

The code

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

  <title></title>

<script type="text/javascript"> 

 function expandcollapse(anchor) {

    var span = document.getElementById("toHide");

    span.style.display = (span.style.display=='none')?'block':'none';

    anchor.innerHTML = (anchor.innerHTML=='less')?'more':'less';

  }

</script>

</head>

<body>

<span id="toHide">Second paragraph</span>First paragraph <a href="#" onclick="expandcollapse(this)">less</a>

</body>

</html>

Was tested with IE6:

When you run it for the first time you got:

Second paragraphFirst paragraph less

After you press the less you got:

First paragraph more

If you press one more time you got:

Second paragraph
First paragraph less

Now if you press less you get:

First paragraph more

-----------------------------------------------------

The order is wrong I should see:
First paragraph and than second paragraph and not vice versa.

Oct 3 '07 #7

pbmods

5,821

Expert 4TB

Heya, Rankin.

Please use CODE tags when posting source code:

[CODE=javascript]
JavaScript code goes here.
[/CODE]

This is not the first time you've been asked.

Oct 4 '07 #8

raknin

Hi,

I overcome the problem from my previous post, so I changed the code as shown below.
Now I want that the text will be open in collapse mode and not in expand mode any suggestions.

Thanks
Ronen

Expand|Select|Wrap|Line Numbers

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

  <title></title>

<script type="text/javascript"> 

 function expandcollapse(anchor) {

    var span = document.getElementById("toHide");

    span.style.display = (span.style.display=='none')?'block':'none';

    anchor.innerHTML = (anchor.innerHTML=='less')?'more':'less';

  }

</script>

</head>

<body>

First paragraph 

<span id="toHide">Second paragraph</span> <a href="#" onclick="expandcollapse(this)">less</a>

</body>

</html>

Oct 4 '07 #9

acoder

16,027

Expert Mod 8TB

I overcome the problem from my previous post, so I changed the code as shown below. Now I want that the text will be open in collapse mode and not in expand mode any suggestions.

So you want to swap it around? Less means more and more means less?!

Oct 4 '07 #10

TAL651

Hello,

I've been reading this thread for tips on how to make expandable/collapsible menus, and ACoder's code looks like it'll work great.

One question, though - any suggestions on how to make an expand/collapse all function? Here is what I have done with Acoder's code so far:

[HTML]
<ul>
<li>Point A<a href="#" onclick="expandcollapse(this)">Hide Subpoints</a>
<ul id="toHide">
<li>Subpoint 1 <a href="#" onclick="expandcollapse3(this)">Hide Sub Sub points</a>
<ul id="toHide3">
<li>Sub Sub point</li>
</ul>
</li>
<li>Subpoint 2</li>
</ul>
</li>
<li>Point B<a href="#" onclick="expandcollapse2(this)">Hide Subpoints</a>
<ul id="toHide2">
<li>Subpoint 1</li>
<li>Subpoint 2</li>
</ul>
</li>
</ul>
[/HTML]

And the javascript:

Expand|Select|Wrap|Line Numbers

 
function expandcollapse(anchor) {

    var span = document.getElementById("toHide");

    span.style.display = (span.style.display=='none')?'block':'none';

   anchor.innerHTML = (anchor.innerHTML=='Hide')?'Show':'Hide';

   }
 
function expandcollapse2(anchor) {

    var span = document.getElementById("toHide2");

    span.style.display = (span.style.display=='none')?'block':'none';

   anchor.innerHTML = (anchor.innerHTML=='Hide')?'Show':'Hide';

   }
 
function expandcollapse3(anchor) {

    var span = document.getElementById("toHide3");

    span.style.display = (span.style.display=='none')?'block':'none';

   anchor.innerHTML = (anchor.innerHTML=='Hide')?'Show':'Hide';

   }

How would I expand/collapse everything all at once?

Thanks!

Oct 4 '07 #11

raknin

So you want to swap it around? Less means more and more means less?!

Acorder,

What I want is when the text is loaded for the first time it will be collapsed, after pressing more it will be expanded. Thanks again ronen.

Oct 4 '07 #12

acoder

16,027

Expert Mod 8TB

Acorder,

What I want is when the text is loaded for the first time it will be collapsed, after pressing more it will be expanded. Thanks again ronen.

For that, you only need to add a style of display:none and change 'less' to 'more':
[HTML]<span id="toHide" style="display:none">Second paragraph</span> <a href="#" onclick="expandcollapse(this)">more</a>[/HTML]

Oct 4 '07 #13

acoder

16,027

Expert Mod 8TB

How would I expand/collapse everything all at once?

You could use document.getElementsByTagName("ul") to get all lists. Then loop over them to hide/show them.

Oct 4 '07 #14

TAL651

You could use document.getElementsByTagName("ul") to get all lists. Then loop over them to hide/show them.

Thanks, I'll give it a try!

Oct 4 '07 #15

nullstring

this JS code might help and good for posting a code in your blogs.

http://heresmycode.blogspot.com/2008...se-part-2.html

Sep 25 '08 #16

Similar topics

Expand/Collapse DIVS

by: James Hurrell | last post by:

Hi, I'm using the following javascript function to expand and collapse portions of text in a web page (targeted at IE5.5 and above): function doExpand(paraNum,arrowNum) { if...

Javascript

Expand and Collapse

by: Jenny | last post by:

My codebehind file contains a lot of sub's. Is there a fast way to expand and collapse them in the VisualStudio? It's really exhausting to collapse them all after opening the project in the...

ASP.NET

urgent please : treeview control expand collapse

by: Gönen EREN | last post by:

how can i collapse or expand a node of treeview control programmaticly? thanks.

ASP.NET

asp.net 2.0 treeview control expand with select

by: Stephen | last post by:

In asp.net 1.1, the IE treeview web control has a property called "SelectExpands" that, when set to true, expands a node when a user clicks the node text. I can't seem to replicate this in the...

ASP.NET

Help!! HTML rowspan does not work with a tree table?

by: smilecry | last post by:

I am trying to create a tree table (javascript code was adopted from online source) but the rowspan in td tag does not work well when I toggle the rows. Here is the sample code, notice the row "4"...

Javascript

I have developed a web forum and I need help

by: muchexie | last post by:

My script is not running, can someone help me.This is the code. <? //display_tree() Function from output_funs.php function display_tree($expanded, $row = 0, $start = 0) { // display the tree...

PHP

Need help on my problem with gridview + div tags + scrollbars.

by: Vijay | last post by:

Hi everyone, I am new member to this group... Looking for a help with my problem related to ASP.NET/javascript. Will be great if someone could throw some light. I am currently designing a...

ASP.NET

Help - change text on click - text has another onclick inside with php variables

by: wizdom | last post by:

Help - change text on click - text has another onclick inside with php variables ---------- I think what I'm trying to do is simple. I have a 2 buttons on a page. 1 button allows a thread of...

Javascript

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server