Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
| Search | Today's Posts | Mark Forums Read
Javascript General Javascript discussions.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old June 18th, 2007, 03:00 AM
Authorized User
 
Join Date: Aug 2005
Location: , , .
Posts: 64
Thanks: 0
Thanked 0 Times in 0 Posts
Default Expand/Collapse Structure

how to create a expand/collapse structure, like this:

(Collapsed Form)

Nokia
Motorola
Sony Erricson

(Expanded Form)
Nokia
 Nokia 6600
 Nokia N-91
 Nokia Communicator
Motorola
 Moto Slim
 Moto Rocker
 Moto FM
Sony Erricson
 K500i
 K750i
 W800i

when I click on Nokia, it may display its models, again I click on Nokia it may hide its models. Same procedure for Motorola and Sony Erricson.

can any body tell me how to do this



 
Old June 18th, 2007, 05:01 AM
Friend of Wrox
 
Join Date: Oct 2004
Location: delhi, delhi, India.
Posts: 553
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to vinod_yadav1919 Send a message via Yahoo to vinod_yadav1919
Default

Hii kanoorani!!

You can use div/span tag or tr/td with display/visibility style ,and check on click on the Noika/Motorola/Sony Erricson ,depending on the click you can change the visibility/diplay of contents.
Hope this will help you


Cheers :)

vinod
 
Old June 18th, 2007, 05:15 AM
Authorized User
 
Join Date: Aug 2005
Location: , , .
Posts: 64
Thanks: 0
Thanked 0 Times in 0 Posts
Default

i'll B thankful 2 u if u plz provide me Code for it

 
Old June 19th, 2007, 12:10 AM
Authorized User
 
Join Date: Jun 2007
Location: Tehran, Tehran, Iran.
Posts: 39
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Here is a sample code snippet that may be helpful for you

    <DIV onclick="showHideMenu('nokia');">Nokia</DIV>
    <DIV id="nokia" style="display:none;">
        &nbsp;Nokia 6600<br />
        &nbsp;Nokia N-91<br />
        &nbsp;Nokia Communicator<br />
    </DIV>
    <DIV onclick="showHideMenu('sonyerricson');">Sonyerrics on</DIV>
    <DIV id="sonyerricson" style="display:none;">
        &nbsp;K500i<br />
        &nbsp;K700i<br />
        &nbsp;W800i<br />
    </DIV>
    <SCRIPT language="javascript">
        function showHideMenu(id)
        {
            if(document.getElementById(id).style.display == 'none')
                document.getElementById(id).style.display = 'inline';
            else
                document.getElementById(id).style.display = 'none';
        }
    </SCRIPT>
 
Old June 19th, 2007, 03:54 AM
Authorized User
 
Join Date: Aug 2005
Location: , , .
Posts: 64
Thanks: 0
Thanked 0 Times in 0 Posts
Default

heyyyyy
thanks alot, it'z working fine

take care :-)





Similar Threads
Thread Thread Starter Forum Replies Last Post
Treeview collapse problem 2 syedwaqarali ASP.NET 2.0 Professional 0 July 13th, 2007 04:26 AM
Treeview collapse problem syedwaqarali ASP.NET 2.0 Professional 1 July 3rd, 2007 05:38 AM
Collapse Dialog Button adriant42 Excel VBA 0 September 23rd, 2004 12:16 PM
Expand/Collapse Data rafstar Classic ASP Basics 4 June 8th, 2003 10:12 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.