Переключение JQuery для нескольких элементов класса при объединении кликов

Question

как видите.Есть три переключателя показа скрытия при нажатии.

<button id="btn-hide" class="btn-toggle">Hide</button>
<button id="btn-show" class="btn-toggle">Show</button>

<button id="btn-hide" class="btn-toggle-2">Hide2</button>
<button id="btn-show" class="btn-toggle-2">Two</button>

<button id="btn-hide" class="btn-toggle-3">Hide3</button>
<button id="btn-show" class="btn-toggle-3">Three</button>

#btn-show {
    display: none;
}

Мой вопрос, возможно сделать этот код более простым, комбинируя мультикласс jquery toggle, поэтому, если нужно создать больше переключателей, нам больше не нужнодобавить новый запрос больше.Спасибо.

$('.btn-toggle').on( 'click', function () {
 $('.btn-toggle').toggle();
});

$('.btn-toggle-2').on( 'click', function () {
 $('.btn-toggle-2').toggle();
});

$('.btn-toggle-3').on( 'click', function () {
 $('.btn-toggle-3').toggle();
});

Answer 1

Оберните каждую пару кнопок в div.

HTML:

    <div class="tgl">
        <button id="btn-hide" class="btn-toggle">Hide</button>
        <button id="btn-show" class="btn-toggle">Show</button>
    </div>

    <div class="tgl">
        <button id="btn-hide" class="btn-toggle">Hide2</button>
        <button id="btn-show" class="btn-toggle">Two</button>
    </div>

    <div class="tgl">
        <button id="btn-hide" class="btn-toggle">Hide3</button>
        <button id="btn-show" class="btn-toggle">Three</button>
    </div>

JS:

    $('.btn-toggle').on( 'click', function () {
      $(this).parent().find('.btn-toggle').toggle();
    });

CSS:

#btn-show {
    display: none;
}
.tgl
{
  display:inline;
}