JSFiddle - React, Tailwind, and code Playground

by olimann

HTML

<body>
    <div class="header">
        <p>This should alternately be shown and hidden</p>
    </div>
    <div class="hide_on_click"> <a class="click_to_hide button">[Show/Hide]</a>

        <p>This should alternately be shown and hidden</p>
    </div>
    <div class="content">
        <p>This should alternately be shown and hidden This should alternately be shown and hidden This should alternately be shown and hidden This should alternately be shown and hidden This should alternately be shown and hidden This should alternately be shown and hidden This should alternately be shown and hidden This should alternately be shown and hidden This should alternately be shown and hidden This should alternately be shown and hidden This should alternately be shown and hidden This should alternately be shown and hidden This should alternately be shown and hidden This should alternately be shown and hidden This should alternately be shown and hidden This should alternately be shown and hidden</p>
    </div>
</body>

CSS

* {
    padding: 0px;
    margin: 0px;
}
body {
}
.header {
    height:400px;
    background-color: red;
}
.content {
    height:1000px;
    background-color: grey;
    padding: 100px 20px;
}
.hide_on_click p {
    height: 200px;
    background-color: pink;
    display:none;
}
.button {
    height: 50px;
    width: 100¨%;
    display: block;
    background-color: yellow;
    text-align: center;
}

JavaScript

$(document).ready(function () {
    $('.click_to_hide').click(function () {
        var visible = $('.hide_on_click').is(":visible");
        $('.hide_on_click').slideToggle(400);
        if (!visible) {
            $('html, body').animate({
                scrollTop: $('.hide_on_click').offset().top
            }, 450);
        }
    });
});