Menú lateral con funcion para ver contenido

HTML5

<!-- SECTION BOTONES TREN -->

    <section>

        <aside>

            <button onclick="ap1()">Image</button>

            <button onclick="ap2()">Vídeo</button>

            <button onclick="ap3()">Botones</button>

            <button onclick="ap4()">Streaming</button>

           

               

        </aside>

        <article>

            <div id="appear-1">

                <img src="https://images.unsplash.com/photo-1682687982423-295485af248a?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">

            </div>

            <div id="appear-2">

                <iframe

                    id="inlineFrameExample"

                    title="Inline Frame Example"

                    width="1200"

                    height="350"

                    src="https://librefutboltv.su/">

                </iframe>

            </div>

            <div id="appear-3">

                <img src="https://images.icon-icons.com/1582/PNG/96/facebook_108044.png" alt="">

                <img src="https://images.icon-icons.com/1582/PNG/96/whatsapp_108042.png" alt="">

                <img src="https://images.icon-icons.com/1211/PNG/96/1491580659-yumminkysocialmedia23_83074.png" alt="">

            </div>

            <div id="appear-4">

                <img src="https://i.pinimg.com/736x/8b/02/00/8b020050690f955ccb306cdf51324aea.jpg" alt="">

                <img src="https://images.chicmagazine.com.mx/I-EEuPLHXLee3Da5slBVEPPOX3g=/512x299/uploads/media/2021/03/04/paramount-es-parte-de-la.jpg" alt="">

                <img src="https://t3.ftcdn.net/jpg/03/60/06/66/360_F_360066662_HP5c8JZZ2LnTkwrYR7You9P2kmE1dz4k.jpg" alt="">

            </div>

        </article>

    </section>

CSS3

/** SECTION BOTONES TREN **/

section{

    width: 100%;

    height: 621px;

    display: flex;

    background: url(img/tren.gif) no-repeat center center /cover;

}

section img,video{

    height: 350px;

}

aside{

    width: 10%;

    display: flex;

    background: red;

    flex-flow: column;

}

aside button{

    width: 100%;

    height: 100%;

}

article{

    width: 90%;

    display: flex;

    align-items: center;

    justify-content: center;

}

#appear-1{

    display: none;

}

#appear-2{

    display: none;

}

#appear-3{

    display: none;

}

#appear-3 img{

    height: 100px;

}

#appear-4{

    display: none;

}

#appear-4 img{

    height: 100px;

}

JAVASCRIPT

function ap1() {

    var x = document.getElementById("appear-1");

    if (x.style.display === "block") {

        x.style.display = "none";

    } else {

        x.style.display = "block";

    }

}

function ap2() {

    var x = document.getElementById("appear-2");

    if (x.style.display === "block") {

        x.style.display = "none";

    } else {

        x.style.display = "block";

    }

}

function ap3() {

    var x = document.getElementById("appear-3");

    if (x.style.display === "block") {

        x.style.display = "none";

    } else {

        x.style.display = "block";

    }

}

function ap4() {

    var x = document.getElementById("appear-4");

    if (x.style.display === "block") {

        x.style.display = "none";

    } else {

        x.style.display = "block";

    }

}