SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    expanding / collapsing <div> tags

    Ive got the follwoing javascript code that will expand/collapse a section of my site that is enclosed within a <div> tag.

    Code:
    function showorhide(id) { 
        if (document.getElementById(id).style.display == "none") 
        {
            document.getElementById(id).style.display = "block";
        } 
        else 
        {
            document.getElementById(id).style.display = "none";
        }
    I am using asp.net 2.0 to code my site with, the above code works fine (example below:

    Code:
    <a href="#" onclick="showorhide('basicdetails');">Basic Personal and Contact Details</a>
    <div id="basicdetails">
    
    </div>
    All that is enclosed within the <div id="basicdetails"> is expanded / collapsed.

    HOWEVER, im geting a few problems with this method:
    1. On a page load, the div tags are always displayed, is there any way of having them collapsed on page_load?
    2. When i put 2 seperate <div> tags (i.e. 2 seperate expand/collapse sections on the same page), one is collapsed and one is expanded, when working within the expanded one and a button is clicked (for saving of info from a form), both divs are then expanded?

    Thanks in advanced

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To solve issue one can't you just define the style of the initial state in the div tag?

    For example:

    <div id="foo" style = "display:none;">

    For issue 2 I think you would need to post the code that invoked by the button. But it sounds like you have a logic error in that code somewhere.

  3. #3
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    just add a line in your CSS file which describes basicdetails
    This line
    Code:
    #basicdetails {
    display:none;
    }
    Kirtan

  4. #4
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats works fine, however now whenever one of the div tags is expanded and the save button is clicked (i.e. postback), the menu will be collapsed again.

    Is there any way of not specifying that the menu should be collapsed in the code, but instead, ask the div to say the same state as it is?

    Code:
    <div id="advanceddetails" style = "display:none;">
    Cheers

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I'm confused because the only way a div changes is when some script makes it change. So to leave it in its current state, you just need to not run any script that changes it.

    I'm guessing I am not understanding you fully. Perhaps you could post the code in question.

  6. #6
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <SCRIPT LANGUAGE="JavaScript" SRC="Javascript.js"></SCRIPT>   
        <h2>
        <a href="#" onclick="showorhide('spousedetails');">Marital Status</a></h2>
        <br/>
        <div id=spousedetails style ="display:none;">
        <asp:Button ID="Button1" runat="server" Text="Button" />
        </div> 
    </asp:Content>
    Javascript.js contains the javascript functions posted earlier.

    When I click the button (Button1), the button dissapears, i.e. the div is collapsed. how can i get it so that when i click the button the content of the div (i.e. the button) will continue to be displayed.

    Thanks for all ur help

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I think maybe I understand what is happening - although I'm not sure. It sounds like you have two states for your divs (call them A and B) and when certain buttons are clicked you want to achieve either A or B depending on which button is clicked.

    The problem is that your function is flipping the state without any regard for the current state. I think you need two functions which would be invoked by different buttons and set the state explicity (rather than just flipping it).

    function showA(){
    document.getElementById("DivBId").style.display = "none";
    document.getElementById("DivAId").style.display = "block";
    }

    function showB(){
    document.getElementById("DivAId").style.display = "none";
    document.getElementById("DivBId").style.display = "block";
    }
    Of course, you will have to put the actual ids for your divs in there. But that should work (assuming I am understanding you correctly).

    There might be a cleaner way to do this with a flag. Personally I try to avoid flags unless it is going to save a lot of execution steps.

  8. #8
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, but ur not understanding me correctly. I'll try explaining little better.

    The only thing that should change the state of the div is by clicking the anchor text (in this instance Marital Status). On the first page load, the div should be hidden (this is why I have included style ="display:none;" into the div).

    The button has been included to show that the state of the div is changed by something other than a click of the anchor text (Marital Status). i.e. the state is changed by the button click.

    I do not want the button click to alter the state, only the anchor text.

    Thanks

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I understand now. Unfortunately now I don't think I can help you. I don't know enough about ASP.

    All I can say at this point is that there is nothing in the code you've shown that indicates to me that the function showorhide is going to be called by the button. I think you should trace through the logic of whatever is invoked by the runat="server" statement on the button.

    Sorry I couldn't help more.

    Cheers

  10. #10
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you trying to save the open/closed state of the div, so that it's the same each time the page loads? You will either have to save the state to the server DB somehow or use logic to tell if each div should be displayed/hidden, like if the SPOUSE DB field is not empty display=block, otherwise display=none.

  11. #11
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As another suggestion, here's an old demo but it has some ideas that might be helpful here.


Bookmarks

Posting Permissions

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