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

Share Improve this question Follow edited May 24, 2014 at 0:15 TylerH 21.1k7878 gold badges7979 silver badges112112 bronze badges asked Apr 26, 2013 at 6:11 user2086641user2086641 4,3711515 gold badges5959 silver badges9696 bronze badges 1

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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/