asp.net - javascript toggle showhide div using one control - Stack Overflow

admin管理员组

文章数量:1295308

Is it possible to toggle show/hide div using only one control?

I have a div(div-menu) which is display:none by default and a logo('div-top-logo' inside a table)

<script type="text/javascript">
    //MENU HIDE/SHOW TOGGLE
    function toggleMenuDiv() {
        var showFlag;
        if (showFlag == false) {
            //SHOW DIV
            var menu = document.getElementById('div-menu'); menu.style.display = 'block'; var contents = document.getElementById('div-contents'); contents.style.display = 'block';
            showFlag = false;                
        }
        else {
            //HIDE DIV
            var elem = document.getElementById('div-menu'); elem.style.display = 'none';
            showFlag = true;
        }
    }            
</script>

<table class="top-menu">
    <tr>
        <td id="div-top-logo" onclick="toggleMenuDiv();"></td>
        <td id="div-top-sysname">EDI Service</td>
    </tr>
</table>

<div id="div-menu" class="main-menu">
    Menu1<br />
    Menu2<br />
    Menu3
</div>

Any kind of help would be appreciated.

Is it possible to toggle show/hide div using only one control?

I have a div(div-menu) which is display:none by default and a logo('div-top-logo' inside a table)

<script type="text/javascript">
    //MENU HIDE/SHOW TOGGLE
    function toggleMenuDiv() {
        var showFlag;
        if (showFlag == false) {
            //SHOW DIV
            var menu = document.getElementById('div-menu'); menu.style.display = 'block'; var contents = document.getElementById('div-contents'); contents.style.display = 'block';
            showFlag = false;                
        }
        else {
            //HIDE DIV
            var elem = document.getElementById('div-menu'); elem.style.display = 'none';
            showFlag = true;
        }
    }            
</script>

<table class="top-menu">
    <tr>
        <td id="div-top-logo" onclick="toggleMenuDiv();"></td>
        <td id="div-top-sysname">EDI Service</td>
    </tr>
</table>

<div id="div-menu" class="main-menu">
    Menu1<br />
    Menu2<br />
    Menu3
</div>

Any kind of help would be appreciated.

• javascript
• asp
• show-hide

Share Follow asked May 17, 2013 at 9:40 devkiatdevkiat 13922 gold badges66 silver badges1717 bronze badges 2

• You mean like this? - jsfiddle/wdqLv – dsgriffin Commented May 17, 2013 at 9:47
• 1 sorry for late reply.. yes this is absolutely what i need. thank you zenith – devkiat Commented May 17, 2013 at 10:15

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

function toggleMenuDiv() {
var menu = document.getElementById('div-menu');
   if (menu.style.display == 'none') {
     menu.style.display = 'block';              
   }
   else {
     menu.style.display = 'none';
   }
} 

var showFlag;

This will be initialized to "undefined" every time you call toggleMenuDiv(). As a result the else block would always be executed. You might want to make it a "global" variable.

Remember too many global variables will be frowned upon.

Try this,

<script type="text/javascript">
//MENU HIDE/SHOW TOGGLE
function toggleMenuDiv() {

    if (document.getElementById('div-menu').style.display = 'block') {
        //SHOW DIV
        document.getElementById('div-contents'); contents.style.display = 'none';
        document.getElementById('div-menu').style.display = 'none'              
    }
    else {
        //HIDE DIV
        document.getElementById('div-menu'); elem.style.display = 'block';

    }
}            

<table class="top-menu">
<tr>
    <td id="div-top-logo" onclick="toggleMenuDiv();"></td>
    <td id="div-top-sysname">EDI Service</td>
</tr>

<div id="div-menu" class="main-menu">
Menu1<br />
Menu2<br />
Menu3

<script>
  $('#<%= check_box_click.ClientID %>').click(function ()
 {
    if ($(this).val() == "1") 
      { 
          $('#<%=divid.ClientID%>').prop("visibility", true);
          $('#<%=divid.ClientID%>').show();
}
else
  {
   $('#<%=divid.ClientID %>').prop("visibility", false);
       $('#<%=divid.ClientID %>').hide();
}
</script>

// try this

本文标签： aspnetjavascript toggle showhide div using one controlStack Overflow