Правильно ли я делаю табы на jQuery?

<style>
    .tabs-content:not(:first-child) {
    display: none;
}
</style>

<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>

<script>
    (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));
</script>