David Spira David Spira - 5 months ago 6x
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.


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>
        var div_to_show = $(this).attr('id');
        $('.'+div_to_show ).slideToggle();

    <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>