David Spira David Spira - 6 months ago 17
Javascript Question

jquery one div replacing another

Say i have this html file with several divs and several buttons(or links).

i don't want to more than one div to ever appear simultaneously. I want to, once you click a button/link, any div displayed disappears and its corresponding div replaces it on screen.

<button onclick="toggleByClass('1');">Toggle 1</button>
<button onclick="toggleByClass('2');">Toggle 2</button>
<button onclick="toggleByClass('3');">Toggle 3</button>

<div class="1">content1</div>
<div class="2">content2</div>
<div class="3">content3</div>


Up to now i only managed to toggle the divs, but that allows more than one to appear simultaneously.

Answer

I have tried in Jquery. It might help you

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function()
{
    $('.content_div').hide();
    $(document).on('click','.toggle_btn',function()
    {
        $('.content_div').hide();
        var div_to_show = $(this).attr('id');
        $('.'+div_to_show ).slideToggle();
    });
});
</script>
</head>

<body>
    <button class="toggle_btn" id="1">Toggle 1</button>
    <button class="toggle_btn" id="2">Toggle 2</button>
    <button class="toggle_btn" id="3">Toggle 3</button>

    <div class="1 content_div">content1</div>
    <div class="2 content_div">content2</div>
    <div class="3 content_div">content3</div>
 </body>