hide div when other one is clicked

Question

This is my code:

<script type='text/javascript'>


        var slide = function (div) {
            if ($(div).css('display') === 'none') {
                $(div).delay(100).slideDown(500);
                return false;
            } else {
                $(div).delay(100).slideUp(500);
                return false;
            }
        }
         //]]>
    </script>


Css:


  #cips,
        #briketi,
        #pelet {
            background-color: cyan;
            position: absolute;
            top: 30px;
            height: 150px;
            width: 300px;
        }

      <a href="#" onclick="slide('#cips');">Cips</a>
    <a href="#" onclick="slide('#pelet');">Pelet</a>
    <a href="#" onclick="slide('#briketi');">Pilana</a>
    <div id="proizvodi">
        <div id="cips" style="display: none">
            Resurs centar</br>
            Cefix
        </div>
        <div id="briketi" style="display: none">
            Proba
        </div>
        <div id="pelet" style="display: none">
            Udruzenje sumovlasnika
        </div>
    </div>

I want to onclick show div, but hide when other one is clicked. Does someone has solution?

Thanks in advance!

Answer 1

You can use Jquery.

$(div).show(); or $(div).hide();

one example

$(document).ready(function(){
  $("div").click(function(){
     $("div2").hide();
     $("div3").show();
  });
});

that's ok?

Answer 2

In the first clause of the if (a hidden one is clicked), you could add this at the beginning:

$('div').slideUp(500);

This will make all <div> s slide up, then slide the wanted one down.

Full code:

JS

function slide(div) {
    if ($(div).css('display') === 'none') {
        $('div').slideUp(500);
        $(div).delay(100).slideDown(500);
     } else {
        $(div).delay(100).slideUp(500);
    }
    return false;
}

Answer 3

HTML

<body> <a href="#" id="link">link</a>
    <div id="showHideDiv" class="hide">hello!</div>
</body>

JAVAScript

$(document).ready(function () {
    jQuery('#link').click(function (e) {
        e.preventDefault();
        if (jQuery('#showHideDiv').hasClass('hide')) {
            jQuery('#showHideDiv').removeClass('hide');
            jQuery('#link').css('color', 'red');
        } else {
            jQuery('#showHideDiv').addClass('hide');
            jQuery('#link').css('color', 'blue');
        }
    });
});

hide div when other one is clicked

Question

3 answers

solution1
1 2014-01-13 11:04:51

solution2
0 2014-01-13 11:06:43

solution3
0 2014-01-13 11:08:28

Demo

hide div when other one is clicked

Question

3 answers

solution1 1 2014-01-13 11:04:51

solution2 0 2014-01-13 11:06:43

solution3 0 2014-01-13 11:08:28

Demo

solution1
1 2014-01-13 11:04:51

solution2
0 2014-01-13 11:06:43

solution3
0 2014-01-13 11:08:28