[Solved] Show/hide to work as accordian

by


Please try following example. I hope it will help you…..:)

<html>
<head>
<style>
.head {
    border:1px solid #666;
    background-color:#f0f0f0;
    padding:3px;
    cursor:pointer;
}
.content {
    border:1px solid #666;
    background-color:#fff;
    height:100px;
    padding:3px;
}
</style>
<script type="text/javascript">
function hideShoowTab(ctb) {
    var ptb = document.getElementById("ptbname").value
    if(document.getElementById("ptbname").value=="") {
        document.getElementById("content"+ctb).style.display="block";
    }
    else if(ptb==ctb) {
        if(document.getElementById("content"+ctb).style.display=="block") {
            document.getElementById("content"+ctb).style.display="none";
        }
        else {
            document.getElementById("content"+ctb).style.display="block";
        }
    }
    else {
        document.getElementById("content"+ptb).style.display="none";
        document.getElementById("content"+ctb).style.display="block";
    }
    document.getElementById("ptbname").value=ctb;
}
</script>
</head>
<body>
    <div>
        <div id="head1" class="head" onclick="hideShoowTab('1')">Head 1</div>
        <div id="content1" class="content">Content 1</div>
    </div>
    <div>
        <div id="head2" class="head" onclick="hideShoowTab('2')">Head 2</div>
        <div id="content2" class="content" style="display:none;">Content 2</div>
    </div>
    <div>
        <div id="head3" class="head" onclick="hideShoowTab('3')">Head 3</div>
        <div id="content3" class="content" style="display:none;">Content 3</div>
    </div>
    <input type="hidden" id="ptbname" name="ptbname" value="1" />
</body>
</html>

4

solved Show/hide to work as accordian