?
Solved

Configure website to have multiple expanding windows

Posted on 2009-02-09
27
Medium Priority
?
254 Views
Last Modified: 2013-11-19
Hi Experts.  I asked a similar question here:
->http://www.experts-exchange.com/Internet/Web_Development/Q_24078560.html

In that question, I needed one expanding text box on the page.  Now I need one that has multiple expanding boxes on one page.  How can I do this?  Thanks in advance for the help!

*Disclaimer, I suck at web developing so please be willing to explain your answer some so I can learn a little bit.  Thanks!
0
Comment
Question by:samiam41
  • 19
  • 6
  • 2
27 Comments
 
LVL 10

Expert Comment

by:Phatzer
ID: 23594920
Given the answer to your previous question, all you need to do is alter the ID shown in the code, below shows three examples of the same thing with different ID's, they should all work on the same page as their ID is different.

Notice, all I've done is change the ID from 'moreInfoDiv' to 'moreInfoDiv2' and 'moreInfoDiv3'.

I hope this is what you were asking for.
<a href="#" onclick="document.getElementById('moreInfoDiv').style.display=document.getElementById('moreInfoDiv').style.display=='block'?'none':'block';">click me</a>
<div id="moreInfoDiv" style="display: none">
line 1<br />
line 2<br />
line 3<br />
</div>
 
<a href="#" onclick="document.getElementById('moreInfoDiv2').style.display=document.getElementById('moreInfoDiv2').style.display=='block'?'none':'block';">click me</a>
<div id="moreInfoDiv2" style="display: none">
line 1<br />
line 2<br />
line 3<br />
</div>
 
<a href="#" onclick="document.getElementById('moreInfoDiv3').style.display=document.getElementById('moreInfoDiv3').style.display=='block'?'none':'block';">click me</a>
<div id="moreInfoDiv3" style="display: none">
line 1<br />
line 2<br />
line 3<br />
</div>

Open in new window

0
 
LVL 10

Accepted Solution

by:
Phatzer earned 800 total points
ID: 23594960
Sorry, I noticed that you had an issue with it jumping to the top of the page each time, the below code is an adaptation of what I put above, but also fixing the problem.
<a href="#" onclick="document.getElementById('moreInfoDiv').style.display=document.getElementById('moreInfoDiv').style.display=='block'?'none':'block'; return false;">click me</a>
<div id="moreInfoDiv" style="display: none">
line 1<br />
line 2<br />
line 3<br />
</div>
 
<a href="#" onclick="document.getElementById('moreInfoDiv2').style.display=document.getElementById('moreInfoDiv2').style.display=='block'?'none':'block'; return false;">click me</a>
<div id="moreInfoDiv2" style="display: none">
line 1<br />
line 2<br />
line 3<br />
</div>
 
<a href="#" onclick="document.getElementById('moreInfoDiv3').style.display=document.getElementById('moreInfoDiv3').style.display=='block'?'none':'block'; return false;">click me</a>
<div id="moreInfoDiv3" style="display: none">
line 1<br />
line 2<br />
line 3<br />
</div>

Open in new window

0
 
LVL 9

Author Comment

by:samiam41
ID: 23595222
Freakin crazy.....  Alright, thanks for the script.  I will make the change to my website tonight and let you know how it goes.  Great work.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 9

Author Comment

by:samiam41
ID: 23595741
Let me ask this while I am getting ready to test your suggestion.  

How much web scripting is involved to do the following (you don't have to answer in depth as I will ask the question on here shortly)?  Instead of the text box expanding and me having to leave enough space for that expansion, what is required to make the text below it to move down when the box is opened?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 23598577
Does is not move down?
0
 
LVL 9

Author Comment

by:samiam41
ID: 23599925
It does.  I misunderstood what was happening.  So here is the follow up question.  I copied and pasted the text I wanted to put in the drop down box and the text lost the bullets as well as being only this wide:
->   blah blah blah    <-

What do I need to change?  Thanks for your help.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 23600016
What bullets?

Please show the code you have
0
 
LVL 9

Author Comment

by:samiam41
ID: 23600065

<a href="#" onclick="document.getElementById('moreInfoDiv').style.display=document.getElementById('moreInfoDiv').style.display=='block'?'none':'block'; return false;">click me</a>
<div id="moreInfoDiv" style="display: none">
A network audit is a professional service that <company> performs on a customer's network.  No software or hardware is installed on any of the customer's computers during this audit.  The information provided from the audit will help <company> and the customer outline a cost-effective technical road map!
 
-Record every computer's (laptop, desktop or server) name, operating system, computer model, etc., that is connected to the customer's network
 
-Record all of the programs installed on those computers and what version it is
 
-Identify network devices (printers, print servers) and related IP addresses
 
-Identify the IP address scheme, gateway server, DNS/WINS servers and related information
<br />
</div>
 
<a href="#" onclick="document.getElementById('moreInfoDiv2').style.display=document.getElementById('moreInfoDiv2').style.display=='block'?'none':'block'; return false;">click me</a>
<div id="moreInfoDiv2" style="display: none">
line 1<br />
line 2<br />
line 3<br />
</div>
 
<a href="#" onclick="document.getElementById('moreInfoDiv3').style.display=document.getElementById('moreInfoDiv3').style.display=='block'?'none':'block'; return false;">click me</a>
<div id="moreInfoDiv3" style="display: none">
line 1<br />
line 2<br />
line 3<br />
</div>

Open in new window

0
 
LVL 9

Author Comment

by:samiam41
ID: 23600073
-xxxx  should be a bullet instead of a dash.  I just put the - so you would know where the bullets should be.
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 1200 total points
ID: 23600116
erm
<a href="#" onclick="document.getElementById('moreInfoDiv').style.display=document.getElementById('moreInfoDiv').style.display=='block'?'none':'block'; return false;">click me</a>
<div id="moreInfoDiv" style="display: none">
A network audit is a professional service that <company> performs on a customer's network.  No software or hardware is installed on any of the customer's computers during this audit.  The information provided from the audit will help <company> and the customer outline a cost-effective technical road map!
<ul> 
<li>Record every computer's (laptop, desktop or server) name, operating system, computer model, etc., that is connected to the customer's network</li>
<li>Record all of the programs installed on those computers and what version it is</li>
<li>Identify network devices (printers, print servers) and related IP addresses</li>
<li>Identify the IP address scheme, gateway server, DNS/WINS servers and related information</li>
</ul>
<br />
</div>
 
<a href="#" onclick="document.getElementById('moreInfoDiv2').style.display=document.getElementById('moreInfoDiv2').style.display=='block'?'none':'block'; return false;">click me</a>
<div id="moreInfoDiv2" style="display: none">
line 1<br />
line 2<br />
line 3<br />
</div>
 
<a href="#" onclick="document.getElementById('moreInfoDiv3').style.display=document.getElementById('moreInfoDiv3').style.display=='block'?'none':'block'; return false;">click me</a>
<div id="moreInfoDiv3" style="display: none">
line 1<br />
line 2<br />
line 3<br />
</div>

Open in new window

0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 1200 total points
ID: 23600124
and

<div id="moreInfoDiv" style="display: none; width:75%">

0
 
LVL 9

Author Comment

by:samiam41
ID: 23600244
Genius!!

Maybe I entered this one part in wrong as the text stayed the same width.
<a href="#" onclick="document.getElementById('moreInfoDiv').style.display=document.getElementById('moreInfoDiv').style.display=='block'?'none':'block'; return false;">click me</a>
<div id="moreInfoDiv" style="display: none; width:75%">
A network audit is a professional service that <company> performs on a customer's network.  No software or hardware is installed on any of the customer's computers during this audit.  The information provided from the audit will help <company> and the customer outline a cost-effective technical road map!
<ul> 
<li>Record every computer's (laptop, desktop or server) name, operating system, computer model, etc., that is connected to the customer's network</li>

Open in new window

0
 
LVL 9

Author Comment

by:samiam41
ID: 23600291
Never mind.  I see what I did.  Outstanding!!!
0
 
LVL 9

Author Comment

by:samiam41
ID: 23600311
@mplungjan: You going to be on here for a bit?
0
 
LVL 9

Author Comment

by:samiam41
ID: 23600407
Got an error about an object missing?

Code attached
<a href="#" onclick="document.getElementById('moreInfoDiv').style.display=document.getElementById('moreInfoDiv').style.display=='block'?'none':'block'; return false;">What is a network audit?</a>
<div id="moreInfoDiv" style="display: none; width:75%">
A network audit is a professional service that -company- performs on a customer's network.  No software or hardware is installed on any of the customer's computers during this audit.  The information provided from the audit will help -company- and the customer outline a cost-effective technical road map!
<ul> 
<li>Record every computer's (laptop, desktop or server) name, operating system, computer model, etc., that is connected to the customer's network</li>
<li>Record all of the programs installed on those computers and what version it is</li>
<li>Identify network devices (printers, print servers) and related IP addresses</li>
<li>Identify the IP address scheme, gateway server, DNS/WINS servers and related information</li>
</ul>
<br />
</div>
 
<a href="#" onclick="document.getElementById('moreInfoDiv2').style.display=document.getElementById('moreInfoDiv2').style.display=='block'?'none':'block'; return false;">Why does my company need it?</a>
<div id="moreInfoDiv" style="display: none; width:75%">
A network audit will give you a great, unbiased snap-shot of your network environment.  Do you have the right amount of licenses?  What model of computers do you have?  What is the service tag or serial number for each device?  Is each computer configured correctly or is there a need for some adjustments?  Do you have enough computers to qualify for licensing discounts on various software products?  Think of the network audit as a chance to verify that your technology budget is being used to its fullest potential. 
</div>

Open in new window

error.bmp
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 1200 total points
ID: 23600431
id="moreInfoDiv"

should be
id="moreInfoDiv2"
on the second div of course

0
 
LVL 9

Author Comment

by:samiam41
ID: 23600500
; )  Oh.  That fixed it.  Can you tell I'm still learning??

I am going to ask a follow up question once I close this one out.  If you will be on here for a sec or two, I will post the link.
0
 
LVL 9

Author Closing Comment

by:samiam41
ID: 31544740
You guys make this look too easy!  Thanks for the help and additional explanation.  I am beginning to understand this a little bit better and that is due to your patience.  Take care!

Regards,
Aaron
0
 
LVL 9

Author Comment

by:samiam41
ID: 23600555
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 23601183
Too late I take it...
0
 
LVL 9

Author Comment

by:samiam41
ID: 23601248
Sorry mate.  I figured it out.  I hated to ask another "noob" question!  ; )
0
 
LVL 9

Author Comment

by:samiam41
ID: 23601252
I am working on the font now and will post that back if you think you will have time.  I can't figure that part out.
0
 
LVL 9

Author Comment

by:samiam41
ID: 23601446
Here we go.  

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_24129746.html

This may be where I need to use CSS, perhaps?
0
 
LVL 9

Author Comment

by:samiam41
ID: 23601909
Either of you can help explain what the expert is trying to do would be helpful.  

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_24129746.html#a23601890
0
 
LVL 9

Author Comment

by:samiam41
ID: 23778132
0
 
LVL 9

Author Comment

by:samiam41
ID: 24520298
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question