使用Java显示/隐藏DIV内容块

Question

Below is complete code I am using to show / hide div block on my page. Currently when I click on particular text heading, it is showing block content of that heading. Then when I click on another text heading, it is showing another block content of that heading but doesn't close previously opened block. I want to close opened block whenever I click on another heading. Please help me.

function viewdetail(divno)
{       
    if(document.getElementById("div_com"+ divno).style.display=="block")
    {
        document.getElementById("div_com"+ divno).style.display="none";
        document.getElementById("a_title"+ divno).title="Click to view details";
    }
    else
    {
        document.getElementById("div_com"+ divno).style.display="block";
        document.getElementById("a_title"+ divno).title="Click to hide details";
    }   
    return true;
}


<table>
<?php 
$int_cnt=1;
while(!$rs_list->eof())
{
?>
    <tr> 
        <td>
        <a name="a<?php print($int_cnt)?>"></a>
            <table>
                <tr>
                    <td><a href="#a<?php print($int_cnt)?>" id="a_title<?php print($int_cnt)?>" onClick="return viewdetail(<?php print($int_cnt)?>);"><?php print($rs_list->fields("title"));?></a></td>
                </tr>
                <tr>
                    <td>
                        <div align="justify" id="div_com<?php print($int_cnt)?>" style="display:none"><table><tr><td>Text will display here</td></tr></table></div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
<?php 
$rs_list->movenext();
$int_cnt=$int_cnt+1;        
}       
?>
</table>

Answer 1

You may want to try using a class to track which div is currently open, and then use that class to find the previously opened div and close it.

Javascript has support in modern browsers for getElementByClassName as you can see at http://caniuse.com/#feat=getelementsbyclassname , and https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName .

So maybe rewrite the function as:

function viewdetail(divno)
{      
    if(document.getElementsByClassName("last-opened"))
    {
        document.getElementsByClassName("last-opened").style.display="none";
        document.getElementsByClassName("last-opened").title="Click to view details";

    }
    if(document.getElementById("div_com"+ divno).style.display=="block")
    {
        document.getElementById("div_com"+ divno).style.display="none";
        document.getElementById("a_title"+ divno).title="Click to view details";
    }
    else
    {
        document.getElementById("div_com"+ divno).style.display="block";
        document.getElementById("a_title"+ divno).title="Click to hide details";
        document.getElementById("a_title"+ divno).className = "last-opened";
        // Or this next line if you want to keep previous classes there.
        // document.getElementById("a_title"+ divno).className = document.getElementById("a_title"+ divno).className + "last-opened";
    }   
    return true;
}

I didn't test it, but I think that would work.

Answer 2

The logic in you function only handles the last clicked div. Therefore you need to A, do as others have sugested and close all B, store the divno in a variable so you know witch one was previously opened and should now be closed C, use JQuery

Answer 3

Note: use jquery give class attribute to your div which is same for all the div and make them hide using css.
HTML(example):

<table>
    <tr>
        <td><a href="#" class="myLink" id="1">this is 1</a>
        </td>
    </tr>
    <tr>
        <td>
            <div align="justify" id="div_dom1" class="myClass">
                <table>
                    <tr>
                        <td>Text will display here for 1</td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
    <tr>
        <td><a href="#" class="myLink" id="2">this is 2</a>

        </td>
    </tr>
    <tr>
        <td>
            <div align="justify" id="div_dom2" class="myClass">
                <table>
                    <tr>
                        <td>Text will display here for 2</td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
    <tr>
        <td><a href="#" class="myLink" id="3">this is 3</a>

        </td>
    </tr>
    <tr>
        <td>
            <div align="justify" id="div_dom3" class="myClass">
                <table>
                    <tr>
                        <td>Text will display here for 3</td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>

CSS:

.myClass{
    display:none
}

JS:

$(document).ready(function () {
    $(".myLink").on('click',function(){
        $(".myClass").hide();
        var divno =  $(this).attr('id');
        $("#div_dom" + divno).show();
    });
});  

JSFIDDLE DEMO