Disable div

I have a table row with <div> surrounded.

<div id=“idx1”>
<tr>

//html elements

</tr>
</div>

<input type=“button” value=“enableDiv” onclick=“toggleAlert()” />

I want when page loads , <div> be disabled and when button clicked <div> enabled.

How do I do it ? Can we do it using javascript ?

Can JQuery be used here ?how?

Alternatively, to ensure that the div is hidden when the page first loads you can hide it using the css for your page. If you don’t have css for the page you would need to place <style> tags around this codebyte.

#idx1 {
display: none;
}

The problem with doing it this way is that if the client doesn’t have javascript enabled, they can’t make the element appear, and probably won’t even realise that something is missing.

Change your input to;

<input type="button" value="enableDiv" id="myButton" />

Put this javascript in the page (will need <script> tags if you don’t already have them);


$("#myButton").click(function() { 
    $("#idx1").toggle();
});

Should work (assuming you already have jQuery loaded).

Whoops, forgot that you wanted the <div> hidden to start with. Put this before the javascript I supplied;

$("#idx1").hide();