how to show/hide a div while performing onclick on a td element

Question

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?

Answer 1

You should keep an eye on this great tutorial page : http://www.w3schools.com/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 common (and more complex) Javascript functions. http://jquery.com/ .Best Regards

Answer 2

If you use JQuery it is very simple.

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

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

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

Answer 3

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

http://jqueryui.com/accordion/