Question

Here is my HTML and javascript code:

HTML:

<div id="common">
    Hi Welcome
</div>

<div>
    <a href="javascript:toggleDiv('customize');" >click here</a>
</div>

<div  id="customize">
    <form action="" method="post" id="MyForm">
        {%  form%}
    </form>
</div>

Javascript code:

<script>
    function toggleDiv(divId) {
        if ($("#"+divId).show()) {
            $("#common").hide();
        }
        else {
            $("#common").show();
        }
    }
</script>

If i click the link “Click here” one div id should be hide and another should be show and if i click it another time vice-versa process should be happened. i tried using this javascript but it’s not worked properly

Answer 1

You need to use :visible to check if the passed div is already visible. Try this:

function toggleDiv(divId) {
    var $el = $("#" + divId);
    if ($el.is(":visible")) {
        $el.hide();
        $("#common").hide();
    }
    else {
        $el.show();
        $("#common").show();
    }
}

You should also change your code to use jQuery to attach you events instead of the clunky onclick attribute:

<a href="#" id="link" data-rel="other-div">click here</a>

$("#link").click(function(e) {
    e.preventDefault();
    toggleDiv($(this).data("other-div"));
});