Как при клике показывать только один элемент?

Question

[rinatoptimus]

Есть три кнопки, каждая из которых скрывает/показывает определенный контент: первая кнопка показывает/скрывает первый контент, вторая кнопка скрывает/показывает второй и тд.
Проблема в том, что если не закрыть только что открытый контент и открыть следующий, то предыдущий не исчезает, таким образом, если открыть все три контента, на странице присутствуют сразу все три.
Вот пример.
Пробовал использовать show(), hide(), но по-моему они здесь не помогут или я не правильно их применил.

$(function() {
  
    // show-hide content ONE
    $('.show-content-one').on('click', function(){
        $('#hidden-content-one').toggleClass('hidden-content-one-show');
    });
    $('.close-content-one').on('click', function(){
        $('#hidden-content-one').toggleClass('hidden-content-one-show');
    });

    // show-hide content TWO
    $('.show-content-two').on('click', function(){
        $('#hidden-content-two').toggleClass('hidden-content-two-show');
    });
    $('.close-content-two').on('click', function(){
        $('#hidden-content-two').toggleClass('hidden-content-two-show');
    });
  
    // show-hide content THREE
    $('.show-content-three').on('click', function(){
        $('#hidden-content-three').toggleClass('hidden-content-three-show');
    });
    $('.close-content-three').on('click', function(){
        $('#hidden-content-three').toggleClass('hidden-content-three-show');
    });
    
});

Answer 1

[Stalker_RED]

похоже, что вы пытаетесь изобрести https://jqueryui.com/tabs/

А если хочется именно велосипед, то там всего пара строчек кода

$('.buttons li').on('click', function(){
	var foo = $(this).data('content')
  $('.content-container .'+foo).show().siblings().hide()
})

https://jsfiddle.net/sraswr7m/