I am trying to hide/show a div while clicking <td> in a table. Table contains two <div>s, and consider while clicking main account holder <td> that the first div should be displayed and the other div is in hidden condition. For authorized reorder, <td>, the respective div should display.

My HTML is

<div id="authreport">
 <table width="270">
    <tr>
        <td>First name:</td>
    </tr>
    <tr>
        <td>Last name:</td>
    </tr>
    <tr>
        <td>Mobile phone:</td>
    </tr>
    <tr>
        <td>Email:</td><td>
    <tr>
        <td>Password:</td>
    </tr>
 </table>
</div>

<div id="mainacc">
    <table>
        <tr>
            <td colspan="2"><h3>Work details</h3></td>
        </tr>
        <tr>
            <td>Organisation:</td>
        </tr>
        <tr>
            <td>Industry Type:</td>
        <tr>
            <td>Street:</td>
        </tr>
        <tr>
            <td>Postcode:</td>
        </tr>
        <tr>
            <td>Country:</td>
        </tr>
    </table>
</div>    

My JavaScript is

function authorised_reporter(auth){
var button = document.getElementById('auth')

auth.onclick = function() {
var div = document.getElementById('authreport');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
  }  }
};

Can any one give me an idea of how to do this?

I am trying to hide/show a div while clicking <td> in a table. Table contains two <div>s, and consider while clicking main account holder <td> that the first div should be displayed and the other div is in hidden condition. For authorized reorder, <td>, the respective div should display.

My HTML is

<div id="authreport">
 <table width="270">
    <tr>
        <td>First name:</td>
    </tr>
    <tr>
        <td>Last name:</td>
    </tr>
    <tr>
        <td>Mobile phone:</td>
    </tr>
    <tr>
        <td>Email:</td><td>
    <tr>
        <td>Password:</td>
    </tr>
 </table>
</div>

<div id="mainacc">
    <table>
        <tr>
            <td colspan="2"><h3>Work details</h3></td>
        </tr>
        <tr>
            <td>Organisation:</td>
        </tr>
        <tr>
            <td>Industry Type:</td>
        <tr>
            <td>Street:</td>
        </tr>
        <tr>
            <td>Postcode:</td>
        </tr>
        <tr>
            <td>Country:</td>
        </tr>
    </table>
</div>    

My JavaScript is

function authorised_reporter(auth){
var button = document.getElementById('auth')

auth.onclick = function() {
var div = document.getElementById('authreport');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
  }  }
};

Can any one give me an idea of how to do this?

• javascript
• html
• css

• which div is to be hidden and which div is to be shown? can you refine your question please? – Sandeep Commented Apr 26, 2013 at 6:18

3 Answers 3

You should keep an eye on this great tutorial page : http://www.w3schools./jquery/jquery_hide_show.asp.

W3School is a great tutorial site (the best from my point of view), and this page show you an example using the JQuery Framework which is "A MUST HAVE INCLUDED" source in your page because it gives very good helper for mon (and more plex) Javascript functions. http://jquery./ .Best Regards

If you use JQuery it is very simple.

$('#DivID').click(function(){
    //You can use show(), hide(), or toggle()        
    $('#DivID').toggle();
});

• http://api.jquery./toggle/
• http://api.jquery./show/
• http://api.jquery./hide/

If you browse through the jquery API there are a lot of effects you can use like fadeout and stuff.

If I understand you correctly, what you're trying to achieve is like accordion. You might wanna see this.

http://jqueryui./accordion/