Expanding / collapsing <div> tags

JavaScript
1

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


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:


<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

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

just add a line in your CSS file which describes basicdetails
This line


#basicdetails {
display:none;
}
4

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?


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

Cheers

5

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 

<%@ 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

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

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

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

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

As another suggestion, here’s an old demo but it has some ideas that might be helpful here.