Onclick changing content on <div>

enter image description here

Is there a way i can make the on the right appear one at a time? And show by sliding?

Here’s the code i’m using.

    <html>
<head>
<style>
#myDIV {
    width: 30%;
    height: 100%;
    text-align: center;
    background-color: #6b4788;
    float: right;
}

#myDIV2 {
    width: 30%;
    height: 100%;
    text-align: center;
    background-color: #ff7300;
    float: right;
}

#myDIV3 {
    width: 30%;
    height: 100%;
    text-align: center;
    background-color: #198062;
    float: right;
}

body { margin: 0; padding: 0; }
</style>
</head>
<body>

<button onClick="div1()">Try it</button>
<button onClick="div2()">Try it</button>
<button onClick="div3()">Try it</button>

<div id="myDIV" style="display:none;">
This is my DIV element.
</div>

<div id="myDIV2" style="display:none;">
This is my DIV element.
</div>

<div id="myDIV3" style="display:none;">
This is my DIV element.
</div>

<script>
function div1() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

function div2() {
    var x = document.getElementById('myDIV2');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

function div3() {
    var x = document.getElementById('myDIV3');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

</body>
</html>

I want to make my site look like this

Read more here: Onclick changing content on <div>

Leave a Reply

Your email address will not be published. Required fields are marked *