How to collapse-expand portion of text in javascript

hello there

is there a way to collapse-expand part of my text

the problem is that i am retriving text data from my data base from a field named "Description" and i want to display the first 3 lines only on a label or textbox and if the user hit a certain button the remmaing lines or text shall appear and if the user hit that button agin then thoses lines (with out the first 3-lines) should disappear

to solve it i replaced the description field in the database with 2 filds ;one for the first 3 lines ane the second for the remaining text

but i don't think that solution is practical

so any idea?

Jan 6 '08 #1

Subscribe Post Reply

7933

Markus

6,050

Expert 4TB

To collapse or expand a DIV / other element you would need to use getElementById('id_of_element') and the use this to toggle with the style of the element

Expand|Select|Wrap|Line Numbers

 
function expand(div)

{ //begin function

var element = document.getElementById(div).style; //get the element

  if(element.display == "none"){ //if element is already hidden...

    element.display = ""; //... toggle the display

  } else { //if element is not hidden...

    element.display = "none"; //... toggle the display

  }

}

Expand|Select|Wrap|Line Numbers

 
<html>

<head>

<script type="text/javascript">

function expand(div)

{ //begin function

var element = document.getElementById(div).style; //get the element

  if(element.display == "none"){ //if element is already hidden...

    element.display = ""; //... toggle the display

  } else { //if element is not hidden...

    element.display = "none"; //... toggle the display

  }

}

</script>

</head>

<body>

<div id="hide" style="display:;" onclick="expand('hide')">

<p>CONTENT</p>

<p>CONTENT</p>

<p>CONTENT</p>

<p>CONTENT</p>

<p>CONTENT</p>

<p>CONTENT</p>

<p>CONTENT</p>

<p>CONTENT</p>

<p>CONTENT</p>

<p>CONTENT</p>

<p>CONTENT</p>

</div>

</body>

Jan 6 '08 #2

Similar topics

"Collapse" a file using PHP array?

by: DesignGuy | last post by:

For lack of a better term I wish to collapse a data file as so: 03/01/04|item1|3081||| 03/01/04|item2|2081||| 03/01/04|item3|1195||| 03/01/04|item1||556|| 03/01/04|item2||450||...

PHP

What does visibility: collapse really mean (and do)?

by: Jukka K. Korpela | last post by:

I have noticed that the meaning of visibility: collapse has been discussed on different forums, but with no consensus on what it really means. Besides, implementations differ. The specification...

HTML / CSS

cross browser border-collapse

by: Daniel Jung | last post by:

Hi ======== Problem: ======== I want images in table rows connect vertically. All images are 32 px in height. =====

HTML / CSS

Firefox border-collapse bug?

by: Vegard Beider | last post by:

This works fine in Opera and IE, but in Firefox 1.0 there seems to be a problem. With border-collapse set to collapse, it indents the table 1px to the left. Any ideas how to resolve this without...

HTML / CSS

Column Visibility Collapse Problem

by: Holmespundit | last post by:

Stylists... I'm having problems collapsing a column. Specifically, I want to collapse the last column of a table. My initial test with a large data set worked, but I cannot make it work with a...

HTML / CSS

C# code

by: Alvin Bruney | last post by:

C# is great but it does have some short comings. Here, I examine one of them which I definitely think is a shortcoming. Coming from C++, there seems to be no equivalent in C# to separate code...

C# / C Sharp

datagrid and border-collapse:collapse style

by: Vaclav Jedlicka | last post by:

Hi I need a datagrid on a page, but it is rendered with the style "border-collapse:collapse;". I do not need this style. It interferes with the settings in my CSS file. I tried to supress it...

ASP.NET

border-collapse:collapse and seperates; Can you have it both ways in one table?

by: Barbara de Zoete | last post by:

Here's what I'm trying to do: Create a table with generic style property . Have a few table cells in the thead that 'have to' melt into eachother, so needing the style . Looking somthing...

HTML / CSS

Margin Collapse problem in Opera and perhaps Foxfire

by: boclair | last post by:

I have been approached over a page that has a horizontal menubar displaying over a banner. The problem advised that the menubar is not displayed and the banner moves up to the position the menubar...

HTML / CSS

VB 2005 Pro: Collapse to definitions is incorrect

by: =?Utf-8?B?QW5kcmVhcw==?= | last post by:

If i click on the function "Collapse to definitions" ALL the collapsable elements in the source become collapsed. This is a bug, then it is not correct. If you do it in c# 2005, then namespace...

Visual Basic .NET

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

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

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++