We help IT Professionals succeed at work.

Configure website to have multiple expanding windows

samiam41
samiam41 asked
on
Medium Priority
279 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!
Comment
Watch Question

Commented:
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

Commented:
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

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
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.

Author

Commented:
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?
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Does is not move down?

Author

Commented:
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.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
What bullets?

Please show the code you have

Author

Commented:

<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

Author

Commented:
-xxxx  should be a bullet instead of a dash.  I just put the - so you would know where the bullets should be.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
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

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
and

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

Author

Commented:
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

Author

Commented:
Never mind.  I see what I did.  Outstanding!!!

Author

Commented:
@mplungjan: You going to be on here for a bit?

Author

Commented:
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
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
id="moreInfoDiv"

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

Author

Commented:
; )  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.

Author

Commented:
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

Author

Commented:
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Too late I take it...

Author

Commented:
Sorry mate.  I figured it out.  I hated to ask another "noob" question!  ; )

Author

Commented:
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.

Author

Commented:
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?

Author

Commented:
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

Author

Commented:
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.