Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1543
  • Last Modified:

collapse and expand a div using java script

I am tryiing to expland and collapse  a div "reportingSection" by clicking (+) or (-) sign.but, It's not working as I expected. When the page got lodede the default shoud be (+) collapse and if I click (+) , the div will expand (-). Right now , it shows (-)  when the page got loded, and if i click (-) it expands,but it doesn't collpse when I click again. I am not sure what I am doing wrong here

Here is my .aspx

    <asp:PlaceHolder ID="plcExpandCollapsePanel" runat="server" Visible="false" EnableViewState="false">
  <div id="expand" ><a href="#" onclick="ExpandCollapsePanel(true);"><img  src="~/Images/Collapse.gif" runat="server" style="margin-right: 5px;" />Change Search Criteria</a></div>
  <div id="collapse" style="display: none;"><a href="#" onclick="ExpandCollapsePanel(false);"><img  src="~/Images/Expand.gif" runat="server" style="margin-right: 5px;" />Change Search Criteria</a></div>
  </asp:PlaceHolder>
            <div id="reportingSection" style="display: none;" runat="server">

Here is code behind

 protected void Page_Load(object sender, EventArgs e)
    {
           plcExpandCollapsePanel.Visible = true;
    }



and here is the java script:


function ExpandCollapsePanel(expand)
{
  if (expand)
  {
      document.getElementById('collapse').style.display = 'none';
      document.getElementById('ctl00_plcMainContent_reportingSection').style.display = 'block';
      document.getElementById('expand').style.display = 'block';
  }
  else
  {
      document.getElementById('collapse').style.display = 'block';
      document.getElementById('ctl00_plcMainContent_reportingSection').style.display = 'none';
      document.getElementById('expand').style.display = 'none';
  }
}
0
jung1975
Asked:
jung1975
  • 4
  • 3
1 Solution
 
CollindsouzaCommented:
Hi jung,

ihere is a very Basic and simple example of show/ hide div

Copy the code in a new page and try integrating it with your current code.. and see if it works


Try this function - best ive found and its good cross browser compatibility:

<!-- in HEAD of document -->
<script language="javascript">

var state = 'hidden';

function showhide(layer_ref) {

if (state == 'visible') {
state = 'hidden';
}
else {
state = 'visible';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.visibility = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].visibility = state;
}
if (document.getElementById && !document.all) {
maxwell_smart = document.getElementById(layer_ref);
maxwell_smart.style.visibility = state;
}
}

</script>


<!-- in BODY of document -->

<div id="agent99" style="position:absolute; top:103px; left:153px;
visibility:hidden;">
your stuff to show here
</div>

<!-- CLICK LINK TO SHOW LAYER -->

<a href="javascript://" onclick="showhide('agent99');">click me</a>

cheers
Collin
0
 
recklezCommented:
Why are you using the placeholder? I think that is unnecessary. Anyhow, here is a working example.

HTML CODE:
<a href="#" onclick="javascript:toggle()"><img src="~/Images/Expand.gif" id="toggler" border="0" /></a>&nbsp;Click to expand
<div id="reportingSection" style="display: none;">This is a test</div>

<script>
var imgExpand = new Image();
imgPlus.src = '~/Images/Expand.gif';

var imgCollapse = new Image();
imgMinus.src = '~/Images/Collapse.gif';

function toggle()
{
      var e = document.getElementById('reportingSection');
      var i = document.images['toggler'];
      
      e.style.display = (e.style.display=='block') ? 'none':'block';
      i.src = (i.src==imgExpand.src) ? imgCollapse.src : imgExpand.src;                              
}

</script>
0
 
jung1975Author Commented:
If I try your code I get java script error: object required..


<script type="text/javascript">>
var imgExpand = new Image();
imgPlus.src = '~/Images/Expand.gif';

var imgCollapse = new Image();
imgMinus.src = '~/Images/Collapse.gif';

function toggle()
{
     var e = document.getElementById('reportingSection');
     var i = document.images['toggler'];
     
     e.style.display = (e.style.display=='block') ? 'none':'block';
     i.src = (i.src==imgExpand.src) ? imgCollapse.src : imgExpand.src;                        
}

</script>

   
           
           
   <a href="#" onclick="javascript:toggle()"><img src="~/Images/Expand.gif" id="toggler" border="0" /></a>&nbsp;Click to expand
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
recklezCommented:
I copied and pasted the script from a website I am working on and forgot to replace imgPlus and imgMinus with imgExpand and imgCollapse.


This should work.

<script type="text/javascript">>
var imgExpand = new Image();
imgExpand .src = '~/Images/Expand.gif';

var imgCollapse = new Image();
imgCollapse .src = '~/Images/Collapse.gif';

function toggle()
{
     var e = document.getElementById('reportingSection');
     var i = document.images['toggler'];
     
     e.style.display = (e.style.display=='block') ? 'none':'block';
     i.src = (i.src==imgExpand.src) ? imgCollapse.src : imgExpand.src;                        
}

</script>


Here is a link to see it in action.
http://64.81.216.226/toggle.html

0
 
jung1975Author Commented:
, I made it to work using my current code somehow but..

the only problem is "Expand" is the default.., so when the page got loded or postback it shows the "Expand"mode.  I would like to set"Collapse" as the default setting.. what do i need to change in my java script...

 <asp:PlaceHolder ID="plcExpandCollapsePanel" runat="server" Visible="false" EnableViewState="false">
  <div id="expand" ><a href="#" onclick="ExpandCollapsePanel(true);"><img id="Img1" src="~/Images/Collapse.gif" runat="server" style="margin-right: 5px;" />Change Search Criteria</a></div>
  <div id="collapse"  style="display: none;"><a href="#" onclick="ExpandCollapsePanel(false);"><img id="Img2" src="~/Images/Expand.gif" runat="server" style="margin-right: 5px;" />Change Search Criteria</a></div>
  </asp:PlaceHolder>
            <div id="reportingSection" style="display: none;" runat="server">


function ExpandCollapsePanel(expand)
{
  if (expand)
  {
      document.getElementById('collapse').style.display = 'block';
      document.getElementById('ctl00_plcMainContent_reportingSection').style.display = 'none';
      document.getElementById('expand').style.display = 'none';
  }
  else
  {
      document.getElementById('collapse').style.display = 'none';
      document.getElementById('ctl00_plcMainContent_reportingSection').style.display = 'block';
      document.getElementById('expand').style.display = 'block';
  }
}
0
 
recklezCommented:
<body onload="ExpandCollapsePanel(false);">
0
 
jung1975Author Commented:
Still gettgin the syntax error

<script type="text/javascript">>
var imgExpand = new Image();
imgExpand .src = '~/Images/Expand.gif';

var imgCollapse = new Image();
imgCollapse .src = '~/Images/Collapse.gif';

function toggle()
{
     var e = document.getElementById('reportingSection');
     var i = document.images['toggler'];
     
     e.style.display = (e.style.display=='block') ? 'none':'block';
     i.src = (i.src==imgExpand.src) ? imgCollapse.src : imgExpand.src;                        
}

</script>
    <div id="projectadministration">
        <a name="content_start" id="content_start"></a>
        <fieldset>
              <br />
            <br />
           
 <a href="#" onclick="javascript:toggle()"><img src="~/Images/Expand.gif" id="toggler" border="0" /></a>&nbsp;Click to expand

            <div id="reportingSection" style="display: none;" runat="server">
                <fieldset style="width: 450px">
                    <legend>Ticket Created &nbsp;in the period</legend>
                    <table border="0" class="NonPrintable" style="width: 450px">
                        <tr>
                            <td class="Label" colspan="2" style="height: 31px">
                                From
                                <asp:Label ID="lblStartDate" runat="server"></asp:Label><br />
                            </td>
                            <td class="Label" colspan="2" style="height: 31px">
                                To
                                <asp:Label ID="lblEndDate" runat="server"></asp:Label><br />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                &nbsp;</td>
                            <td style="vertical-align: bottom">
                                <asp:Button ID="btnClearStartDate" runat="server" Text="Clear" /></td>
                            <td>
                                &nbsp;</td>
                            <td style="vertical-align: bottom; width: 53px">
                                <asp:Button ID="btnClearEndDate" runat="server" Text="Clear" />
                            </td>
                        </tr>
                    </table>
                </fieldset>
                <br />
                <br />
                <fieldset style="margin-bottom: 20px; width: 450px">
                    <legend>Application and Features</legend>
                    <table border="0" class="NonPrintable" style="width: 450px">
                        <tr>
                            <td class="Label">
                                Application
                            </td>
                            <td class="Label">
                                <asp:Label ID="lblFeature" runat="server" Text="Feature"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                </td>
                            <td>
                                &nbsp;</td>
                        </tr>
                    </table>
                </fieldset>
                <br />
                <br />
                <fieldset style="margin-bottom: 20px; width: 450px">
                    <legend>Other ticket Properties</legend>
                    <table border="0" class="NonPrintable" style="width: 450px">
                        <tr>
                            <td class="Label">
                                Filed By</td>
                            <td class="Label">
                                Clinic</td>
                        </tr>
                        <tr>
                            <td>
                                &nbsp;</td>
                            <td>
                                </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                &nbsp;</td>
                        </tr>
                        <tr>
                            <td class="Label">
                                Status</td>
                            <td class="Label">
                                Priority</td>
                        </tr>
                        <tr>
                            <td>
                                </td>
                            <td>
                                </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                &nbsp;</td>
                        </tr>
                    </table>
                </fieldset>
            </div>
           
0
 
recklezCommented:
The problem is this line     <script type="text/javascript">>

Change it to    <script type="text/javascript">
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now