Показать элемент по счету
или переключатель текста

Разберем простой переключатель текста. Для того, чтобы каждый раз не писать отдельную функцию привязанную к классам необходимых элементов, вот небольшой код-паттерн. Который открывает нужный блок "по счету" кликнутой ссылки. Требуется только заменить классы на что кликаем и что открываем.

Как это работает: сначала нужно определить какой "по счету" элемент кликнут, потом открыть такой же "по счету" блок текста.

#switcher article { display: none; }

<nav class="links">
    <li>Первый блок</li>
    <li>Второй блок</li>
    <li>Третий блок</li>
    <li>Четвертый блок</li>
</nav>

<section id="switcher">
    <article style="display: block;">то что надо показать 1</article>
    <article>то что надо показать 2</article>
    <article>то что надо показать 3</article>
    <article>то что надо показать 4</article>
</section>

$( "nav.links li" ).on( "click", function(){
    var eq = $(this).index();              /* получаем число клинутого "по счету" элемента */
    $( "#switcher article" ).hide();          /* скрываем блоки с текстом */
    $( "#switcher article" ).eq( eq ).show(); /* открываем аналогичный "по счету" блок с текстом */
});

See the Pen oxZNqO by serge (@gaserge) on CodePen.