www.webdeveloper.com
Page 2 of 6 FirstFirst 1234 ... LastLast
Results 16 to 30 of 90

Thread: Expand/Collapse Paragraph

  1. #16
    Join Date
    May 2006
    Posts
    5
    anyone?

  2. #17
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    I tried your code and it gave me

    Question
    Answer

    in that order?
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  3. #18
    Join Date
    May 2006
    Posts
    5
    Doh. So it does! I tried the code in a new document and it worked fine. There must be something in the original document that was causing the error - With over 500 lines of code, I think I'll just start again!

    Thanks for your help!

  4. #19
    Join Date
    May 2006
    Posts
    14
    Hi All,
    I'm kind of new to JavaScript, JSP and DHTML.
    I went through the solution posted by Mr. J and Ultimater in the beginning.
    I have a query about that.
    What if we have different form elements (like text boxes, labels, combo, etc) instead of only text (By text, I'm referring to "blah blah content").
    Can we expand and collapse the page in the similar fashion which will now show and hide various form elements????

    Actually, my main motive is as follows...
    A JSP page has around 10 fields in all.User is reqd to compulsorily fill in 5 fields to proceed to next page.
    Hence, page is divided in 2 parts, Basic and Advanced.
    When page first loads, only the first 5 Basic fields are visible, along with a button "Advanced".When user clicks on "Advanced" all 10 fields are displayed, with button "Basic".On clicking "Basic", first 5 fields visible.
    There is only one request through which we come to this page, and there is only one request which we have to send at the end to the servlet (when user clicks button "Submit Form").
    Then there are cases when the user fills values in the form and clicks "Advanced".We need to retain those values also when displaying the page.
    Can anyone please guide me?

  5. #20
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    See if this help you

    PHP Code:
    <HTML>
    <
    HEAD>
    <
    TITLE>Document Title</TITLE>

    <
    script type="text/javascript">
    function 
    toggleMe(a){

    var 
    e=document.getElementById(a);
    if(!
    e)return true;

    dualButt()

    if(
    e.style.display=="none"){
    e.style.display="block"
    }
    else{
    e.style.display="none"
    }

    return 
    true;
    }

    var 
    i=0
    function dualButt(){
    i++
    if (
    i==1){
    document.myform.mybutton.value="Basic"
    }

    if (
    i==2){
    document.myform.mybutton.value="Advance"
    i=0
    }
    }


    </script>

    </HEAD>
    <BODY>

    <form name="myform">

    <input type="button" name="mybutton" onclick="return toggleMe('adv')" value="Advance"><br>
    <p>
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    </p>


    <div id="adv" style="display:none">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    </div>

    </form>


    </BODY>
    </HTML> 
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  6. #21
    Join Date
    Jun 2006
    Posts
    7

    Expand Collapse

    Hi. New to this forum. Have an issue and rather than start a new thread thought I would post it here as it seems most relevant.

    I'm new to Javascript and I've got code here that expand/collapses certain links that I've place under a category(note: there are some free links without categories). The plus image is there when page loads but minus/plus aren't there if you want to collapse/expand...the red x appears in its place. What am I doing wrong?

    Here is the code:

    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


    <STYLE type=text/css>
    span.text1 { font-family: verdana; font-size: 11px; color: #003399;}
    A:link {text-decoration: none; color: #003399;}
    A:visited {text-decoration: none; color: #000066;}
    A:active {text-decoration: none}
    A:hover {text-decoration: underline; color: red;}
    .open {
    display: block;
    }
    .closed {
    display: none;
    }
    li {
    list-style-type: none;
    padding-top: .2em;
    padding-bottom: .2em;
    /*list-style-image: url(bullet.gif);*/
    }

    li img {
    vertical-align: middle;
    }
    Ul {
    margin-left: -1.5em;
    padding-left: 03em;
    text-indent: 0em;
    }
    </STYLE>
    <script>
    function toggle(id){
    ul = "ul_" + id;
    img = "img_" + id;
    ulElement = document.getElementById(ul);
    imgElement = document.getElementById(img);
    if (ulElement){
    if (ulElement.className == 'closed'){
    ulElement.className = "open";
    imgElement.src = "G:/images/minus.gif";
    }
    else{
    ulElement.className = "closed";
    imgElement.src = "G:/images/plus.gif";
    }
    }
    }
    </script>


    <span class="text1">

    <li id="Passport"> <IMG id=img_Passport alt ="" src="G:\share\INTERN\Amy's Folder\Sharepoint\images\bullet.gif" border=0 > <a href="http://passport/cgi-bin/passport/ppcat?p=pp-cpi">Passport</a>
    <li id="PIE"> <IMG id=img_PIE alt ="" src="G:\share\INTERN\Amy's Folder\Sharepoint\images\bullet.gif" border=0 > <a href="http://workplace/pie/piequery.asp">PIE</a>

    <li id="TIPS"> <IMG id=img_TIPS alt ="" src="G:\share\INTERN\Amy's Folder\Sharepoint\images\bullet.gif" border=0 > <a href="http://workplace/tips/">TIPS</a>


    <li id="Consumer Relations"><A onclick="toggle('Consumer Relations');" href = "#Consumer" Relations><IMG id="img_Consumer Relations" alt="" src="G:\share\INTERN\Amy's Folder\Sharepoint\images\plus.gif" border=0></a>Consumer Relations

    <ul id = "ul_Consumer Relations" class = "closed">


    <li id="CR assist"> <IMG id="img_CR assist" alt="" src="G:\share\INTERN\Amy's Folder\Sharepoint\images\bullet.gif" border=0> <a href="http://crassist" > CR assist</a></li>
    </ul>
    </span></LI></UL></LI

  7. #22
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    It looks like you have the path to your images as a local path (on you harddrive)

    G:\share\INTERN\Amy's Folder\Sharepoint\images\bullet.gif

    this needs to be corrected to reflect the path on your server
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  8. #23
    Join Date
    Jun 2006
    Posts
    7

    expand collapse

    This is actually a network drive, that is shared. Could there be something missing in the code?...

  9. #24
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    The path you have in the script

    G:/images/plus.gif

    is not the same as you have in the image tag

    G:\share\INTERN\Amy's Folder\Sharepoint\images\plus.gif

    if they are the same image they should be the same path
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  10. #25
    Join Date
    Jun 2006
    Posts
    7
    Oh yes, I see. I'll change it.

    Thanks Mr J

  11. #26
    Join Date
    Jun 2006
    Posts
    7
    It worked!,

    However, I'm getting too much spacing between the categories/expand collapse buttons. How do I reduce the spacing?

  12. #27
    Join Date
    Jun 2006
    Posts
    7
    Again the code is as follows:

    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


    <STYLE type=text/css>
    span.text1 { font-family: verdana; font-size: 11px; color: #003399;}
    A:link {text-decoration: none; color: #003399;}
    A:visited {text-decoration: none; color: #000066;}
    A:active {text-decoration: none}
    A:hover {text-decoration: underline; color: red;}
    .open {
    display: block;
    }
    .closed {
    display: none;
    }
    li {
    list-style-type: none;
    padding-top: .2em;
    padding-bottom: .2em;
    /*list-style-image: url(bullet.gif);*/
    }

    li img {
    vertical-align: middle;
    }
    Ul {
    margin-left: -1.5em;
    padding-left: 03em;
    text-indent: 0em;
    }
    </STYLE>
    <script>
    function toggle(id){
    ul = "ul_" + id;
    img = "img_" + id;
    ulElement = document.getElementById(ul);
    imgElement = document.getElementById(img);
    if (ulElement){
    if (ulElement.className == 'closed'){
    ulElement.className = "open";
    imgElement.src = "G:/share/INTERN/Amy's Folder/Sharepoint/images/minus.gif";
    }
    else{
    ulElement.className = "closed";
    imgElement.src = "G:/share/INTERN/Amy's Folder/Sharepoint/images/plus.gif";
    }
    }
    }
    </script>


    <span class="text1">

    <li id="Passport"> <IMG id=img_Passport alt ="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/bullet.gif" border=0 > <a href="http://passport/cgi-bin/passport/ppcat?p=pp-cpi">Passport</a>
    <li id="PIE"> <IMG id=img_PIE alt ="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/bullet.gif" border=0 > <a href="http://workplace/pie/piequery.asp">PIE</a>

    <li id="TIPS"> <IMG id=img_TIPS alt ="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/bullet.gif" border=0 > <a href="http://workplace/tips/">TIPS</a>

    <li id="Power Wheels"> <IMG id=img_Power Wheels alt ="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/bullet.gif" border=0 > <a href="http://fp/fpsites/PWEngineering/WebPages/Power%20Wheels%20Engineering.aspx">Power Wheels</a>


    <li id="Consumer Relations"><A onclick="toggle('Consumer Relations');" href = "#Consumer" Relations><IMG id="img_Consumer Relations" alt="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/plus.gif" border=0></a>Consumer Relations

    <ul id = "ul_Consumer Relations" class = "closed">


    <li id="CR assist"> <IMG id="img_CR assist" alt="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/bullet.gif" border=0> <a href="http://crassist" > CR assist</a></li>
    </ul>
    </span></LI></UL></LI>




    <li id="HR related"><A onclick="toggle('HR related');" href = "#HR" related><IMG id="img_HR related" alt="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/plus.gif" border=0></a>HR related

    <ul id = "ul_HR related" class = "closed">


    <li id="e-time"> <IMG id="img_e-time" alt="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/bullet.gif" border=0> <a href="https://etimejava.corp.mattel.com/wfc/logon" > e-time</a></li>


    <li id="my HR"> <IMG id="img_my HR" alt="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/bullet.gif" border=0> <a href="https://myhr.matna.mattel.com/psp/psprtprd/?cmd=login" > my HR</a></li>


    <li id="Rave Reviews"> <IMG id="img_Rave Reviews" alt="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/bullet.gif" border=0> <a href="http://www.mattelravereviews.com/login/login.asp" > Rave Reviews</a></li>

    </ul>
    </span></LI></UL></LI>


    <li id="Internet Search Engines"><A onclick="toggle(Internet Search Engines');" href = "#Internet" Search Engines><IMG id="img_Internet Search Engines" alt="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/plus.gif" border=0></a>Internet Search Engines

    <ul id = "ul_Internet Search Engines" class = "closed">

    <li id="Google"> <IMG id="img_Google" alt="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/bullet.gif" border=0> <a href="http://www.google.com" > Google</a></li>

    <li id="MSN"> <IMG id="img_MSN" alt="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/bullet.gif" border=0> <a href="http://www.msn.com" > MSN</a></li>

    </ul>
    </span></LI></UL></LI>

    <li id="Intranet"><A onclick="toggle('Intranet');" href = "#Intranet" ><IMG id="img_Intranet" alt="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/plus.gif" border=0></a>Intranet

    <ul id = "ul_Intranet" class = "closed">

    <li id="Mattel On Demand"> <IMG id="Mattel On Demand" alt="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/bullet.gif" border=0> <a href="http://mod/default.aspx" > Mattel On Demand</a></li>

    <li id="Playground"> <IMG id="Playground" alt="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/bullet.gif" border=0> <a href="http://playground/" > Playground</a></li>

    </ul>
    </span></LI></UL></LI>

    <li id="Product & Project Info"><A onclick="toggle('Product & Project Info');" href = "#Product" & Project Info ><IMG id="img_Product & Project Info" alt="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/plus.gif" border=0></a>Product & Project Info

    <ul id = "ul_Product & Project Info" class = "closed">

    <li id="Catalog Search"> <IMG id="Catalog Search" alt="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/bullet.gif" border=0> <a href="http://workplace/imaging/catalog/" > Catalog Search</a></li>

    </ul>
    </span></LI></UL></LI>

    <li id="Operating Procedures"><A onclick="toggle('Operating Procedures');" href = "#Operating"Procedures ><IMG id="img_Operating Procedures" alt="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/plus.gif" border=0></a>Operating Procedures

    <ul id = "ul_Operating Procedures" class = "closed">

    <li id="PDM Release System"> <IMG id="PDM Release System" alt="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/bullet.gif" border=0> <a href="http://mattelpdm/newCPI/CPIRelStart.html?group=CPI" > PDM Release System</a></li>

    <li id="PI Global Compliance(old specs)"> <IMG id="PI Global Compliance(old specs)" alt="" src="G:/share/INTERN/Amy's Folder/Sharepoint/images/bullet.gif" border=0> <a href=http://workplace/pi/default.asp?B1=Agree" > PI Global Compliance (old specs)</a></li>" > PI Global Compliance (old specs)</a></li>




    </ul>
    </span></LI></UL></LI>

  13. #28
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    Take out all the redundant </span></LI></UL></LI> tags, see if that helps
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  14. #29
    Join Date
    Jun 2006
    Posts
    7
    Hey Mr J

    I took out only the extra </LI> because when I took out the whole thing different categories merged into each other. Taking out the extra </LI> reduced the spacing between categories, however there is excess spacing between the category heading and the first listed link. I'm not sure why that occurs.

  15. #30
    Join Date
    Jun 2006
    Posts
    7

    Red face expand collapse

    anyone?

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles