How do I split items and different sub-crops on the same page?

Question

I wanted to divide some items into different subpages, an image of an example.

For example, if I click on button 1 he shows the element 1, if I click on button 2 he shows the element 2, but all this without changing page, for example: website/page1, website/page2

I wish this was all on the same page, if anyone can help me thank you.

Answer 1

Here’s a simple example with only CSS that can sometimes fit you. Don’t just use JS CSS, A tip is before using watch out and study the CSS rules and the HTML structure to understand how everything works. But basically it’s a button system like radio that when checados show the content.

If you are using Bootstrap it already has an Tabs component (Tabs) ready to use, sometimes it can help you if you are using, here is the link

input, .content {
    display: none;
    background: #0084aa;
    line-height: 25px;
    padding: 5px 25px;
    color: #fff;
    font: normal 1em/150% Sans-Serif;
    min-width: 200px;
    max-width: 600px;
    margin-top: 10px;
}

#one:checked ~ .one,
#two:checked ~ .two,
#three:checked ~ .three {display: block;}

label {
    cursor: pointer;
    background: #00a8d8;
    height: 25px;
    padding: 5px 10px;
    display: inline-block;
    text-align: center;
    color: #fff;
    font: normal 1em/150% Sans-Serif;
    margin-right: 10px;
    transition: background .25s linear;  
}

<input type="radio" name="nav" id="one" checked="checked"/>
<label for="one">BTN 1</label>

<input type="radio" name="nav" id="two"/>
<label for="two">BTN 2</label>

<input type="radio" name="nav" id="three"/>
<label for="three">BTN 3</label>

<article class="content one">
    <h3>Btn Info 1</h3>
    <p>A bunch of info here.</p>
</article>

<article class="content two">
    <h3>Btn info 2</h3>
    <p>More info here.</p>
    <img src="http://placecage.com/200/200" alt="">
</article>

<article class="content three">
    <h3>Btn info 3</h3>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit a molestias quo neque, inventore modi beatae debitis vel totam corporis. Doloribus, vitae. Commodi accusantium delectus iste fuga sequi nam molestiae quae sit minima voluptatibus odio velit optio pariatur ipsam dignissimos reprehenderit modi, excepturi ducimus debitis. Perferendis ullam officiis saepe voluptas!</p>
</article>

Reference source