/    Sign up×
Community /Pin to ProfileBookmark

Expanding and collapsing on clicking a button

Copy linkTweet thisAlerts:
Dec 04.2008

Hi all,

I have an ‘arrow’ button, and a text besides it. On clicking the button, the section needs to be expanded. There are many sections like this, and on clicking the arrow button besides each section, the corresponding section need to be expanded. How do I do this?

I have a list with 4 items in one of the sections. On selecting the first item, I need to add a text box in that section and on selecting the second item i need to add another text box. Based on my selection, I need to add text boxes accordingly in that section. How do I do this?

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERDec 04.2008 — What have you got as starting code?

Along with your request it would be nice to see an attempt.
Copy linkTweet thisAlerts:
@vaishnaviauthorDec 04.2008 — JMRKER, this is what I started with:

<html>

<head><title>Prospecting</title>

<script type="text/javascript">

function CreateTextbox()

{

var newRadioButton = document.createElement("<INPUT TYPE='text' NAME='TEST' VALUE='First Choice'>");

document.body.insertBefore(newRadioButton);

}

</script></head>

<body>

<form name="form">

<table border="0" cellpadding="0" cellspacing="0" width=100%>

<tr bgcolor="#990000">

<td length=20 width=2%><INPUT type="button" name="search" onClick="CreateTextbox()"></td>

<td length=1700 width=98%><font face="Verdana" color="#FFFFFF">Contacting Your Prospects</td></tr>


<tr height="2.5" bgcolor="#990000">

<td length=20><INPUT type="button" name="search" onClick="CreateTextbox()"></td>

<td length=1700><font face="Verdana" color="#FFFFFF">Type of Business</td></tr>

</form>

</body>

I have used <table> to align fields. I have seperated the two sections as two rows. If i click the button on the first row, corresponding fields has to be added inbetween the first row and the second row, i.e., it should look like the first section is expanding. Likewise the button in the second row also.
Copy linkTweet thisAlerts:
@vaishnaviauthorDec 05.2008 — I don't think you are creating the element correctly.

See: http://www.adp-gmbh.ch/web/js/elements/createelement.html

or: http://www.eggheadcafe.com/community/aspnet/3/83909/how-to-createelementa.aspx[/QUOTE]

Thanks JMRKER. your links helped me.

but for creating one text box, i will have to write atleast 5 to 6 lines of code. In mycase, i will have to add many such elements dynamically. Is there any other simple way to add such elements?
Copy linkTweet thisAlerts:
@vaishnaviauthorDec 05.2008 — I was successful in creating a text box while expanding. I also created a 'select' list box. But i am not able to set the values to the list box. Here is my code:

<html>

<head><title>Prospecting</title>

<script type="text/javascript">

function CreateTextbox()

{

var r = document.createElement('tr');

var r1=document.createElement('td');

var ca = document.createElement('td');

var input = document.createElement('select');

var type = document.createAttribute('name');

var id = document.createAttribute('id');

input.setAttribute(id,"list1");

input.setAttribute(name,"contacts");

var option = document.createElement('option');

var value = document.createAttribute('value');
var value1 = document.createAttribute('value');
option.setAttribute(value,"All");
option.setAttribute(value1,"Your prospects");


var t=document.getElementById('table1234');
ca.appendChild(input);
input.appendChild(option);
r.appendChild(r1);
r.appendChild(ca);
t.appendChild(r);
}

</script></head>

<body>

<form name="form">

<table border="0" cellpadding="0" cellspacing="0" width=100% id="table123">

<tr bgcolor="#990000" id="table1234">

<td length=20 width=2%><INPUT type="button" name="search" onClick="CreateTextbox()"></td>

<td length=1700 width=98%><font face="Verdana" color="#FFFFFF">Contacting Your Prospects</td></tr>


<tr height="2.5" bgcolor="#990000" id="new123">

<td length=20><INPUT type="button" name="search" onClick="CreateTextbox()"></td>

<td length=1700><font face="Verdana" color="#FFFFFF">Type of Business</td></tr>

</form>

</body>


I have seen many examples in the net, where a list will already exist exist in the form, and I will they will have to only add items to the list. But in my case, the list itself should be added dynamically and the items should then be added to it. How do i add items to a list? Can anyone help me?
×

Success!

Help @vaishnavi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...