CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Baoky chen
Baoky chen

Reputation: 99

Javascript hide DIV

<script type="text/javascript">
function hide4d()
{
document.getElementById('4d_div').style.display = 'none';
}
</script>

Is there something wrong with my hide div code, I trying hide this

<div id="4d_div">
some content
some inner div , some inner div close

</div>

and I did this to my tag

<body onLoad="hide4d();">

and nothing happen when my page load.. i just wanna hide the div by default using javascript, and unhide it with a button later.

jsfiddle

Edited:

I had this on my 

<script type="text/javascript">
document.getElementById('4d_div').style.display = 'none';
</script>
</head>

But the 4d_div is still not hidden. It seems to work fine if i change to nowrap in fiddle

The weird thing is

I inspect element with chrome, the display: none; was added in, but I din't add the close tag there

my code is something like

<div id="4d_div">

<tr><td>&nbsp;&nbsp;</td></tr>

<div id="big_rate_div" class="form-group">
<tr><td width="25%">
<label for="big_rate">Big Rate</label>
</td><td>
<b>1.60</b>
</td></tr>
</div>

<tr><td>&nbsp;&nbsp;</td></tr>

<div id="small_rate_div" class="form-group">
<tr><td width="25%">
<label for="big_rate">Small Rate</label>
</td><td>
<b>0.70</b>
</td></tr>
</div>

<tr><td>&nbsp;&nbsp;</td></tr>

<div id="rebate"  class="form-group">
<tr><td width="25%">
<label for="rebate">Rebate</label>
</td><td>
<table>
<tr><td width="30%">
<input type="text" class="form-control" id="ticket_rebate" placeholder="">
</td><td>%</td>
</tr></table>
</td>
</tr>
</div>

<tr><td>&nbsp;&nbsp;</td></tr>

<div id="commission"  class="form-group">
<tr><td width="25%">
<label for="commission">Commission</label>
</td><td>
<table>
<tr><td width="30%">
<input type="text" class="form-control" id="commission" placeholder="">
</td>
<td>%</td>
</tr></table>
</td>
</tr>
</div>

</div>

My 4d_div suppose to end at the last tag, but when my page is load, the 4d_div seems individual

it close right after it open , and the div inside it was all wrap by themselves.

Is there any part of my code to make my div unable to wrap the other 4 div , big_rate_div, small_rate_div, rebate and commission

Picture Link of the issue

Upvotes: 1

Views: 519

Answers (4)

RN Kushwaha
RN Kushwaha

Reputation: 2136

I think the problem is in div'name which starts with 4 a numeric. It should start from a character $ or underscore.

Upvotes: 0

MrCode
MrCode

Reputation: 64536

Your fiddle doesn't work because you've selected to run the code "onLoad" in the sidebar. This creates a new scope for your function definition, so your call from the <body> tag fails due to this (look at the console - F12 to see the error message).

Change the sidebar option to run in the head instead, which leaves your function in the global scope.

Updated working fiddle

If you're having the same problem on your own page, outside of jsFiddle, then verify that the function definition exists and it is in the global scope (meaning not contained within any other function or closure). Use the console to debug.

After your edit:

Now you've lost the function and are just trying to set the style immidately. In this case, you need to either move the JavaScript to the end of the page, or use a DOM ready wrapper. The reason for this is the div is not ready in the DOM at the time the JavaScript tries to access it. For example:

window.onload = function(){
    document.getElementById('4d_div').style.display = 'none';
};

Upvotes: 2

justjoe300
justjoe300

Reputation: 81

you could try something like this: 

$(document).ready(function() {
            $('#4d_div').hide();
            $('#yourbuttonIDhere').on('click', function() {
                            $('#4d_div').show();
            }
        });

Upvotes: 0

uncoder
uncoder

Reputation: 1886

You may want to set your div's initial style to "display: none", so it is hidden by default instead. Then create a button click handler that will show the div.

Upvotes: 1

Related Questions