<div class="tabs">
    <div class="tabs-button-container">
        <button type="button" class="tabs-button" data-id="1">Параграф 1</button>
        <button type="button" class="tabs-button" data-id="2">Параграф 2</button>
        <button type="button" class="tabs-button" data-id="3">Картинка</button>
    </div>
    <div class="tabs-content-container">
        <div class="tabs-content" data-id="1">
            1. Lorem ipsum dolor sit amet.
        </div>
        <div class="tabs-content" data-id="2">
            2. Lorem ipsum dolor sit amet.
        </div>
        <div class="tabs-content" data-id="3">
            <img src="https://avatars.mds.yandex.net/get-pdb/1220848/0b4c6812-c360-49c3-9266-d0fa010e493f/s1200" width="350">
        </div>
    </div>
</div>
.tabs-content:not(:first-child) {
    display: none;
}
(function ($) {
    'use strict';

    $('.tabs-button').on('click touch', function (event) {
        event.preventDefault();
        var id = $(this).data('id');
        $('.tabs-content').hide();
        $('.tabs-content[data-id="'+ id +'"]').fadeIn();
    });

}(jQuery));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js