Как правильно реализовать нажатые на кнопку?

Question

[Bogdan Buchko]

У меня есть две кнопки и при нажатые на них контент должен пропадать и появляться другой, а если нажать на другую кнопку, то же самое, но оно возвращает исходный контент. Но у меня почему-то ничего не происходит.

<div class="filter">
                    <div class="filter-all">Все</div>
                    <div class="filter-end">Завершение</div>
                    <div class="filter-work">В процессе</div>
                    <div class="filter-throw">Брошены</div>
</div>
<div class="list-all">
     <p>Content</p>
</div>
<div class="list-end">
     <p>Content</p>
</div>

//filter//
  $(".filter-all").click(function(){
    if ($(".filter-all").css("display") == "none"){
      $(".list-all").hide();
      $(".filter-all").css("background-color", "#b63737");
    }
  });

  $(".filter-end").click(function(){
    if ($(".filter-end").css("display") == "none"){
      $(".list-end").hide();
      $(".filter-end").css("background-color", "#b63737");
    }
  });

Comments

[Сергей Сергей]

Это называется "табы", тут полно вопросов по ним, можно ухватить рабочий вариант.

Answer 1

[Андрей Галкин]

Вот пример, конечно не самый лучший, но работает:
https://codepen.io/MrPackage/pen/YzaLzPg?editors=1111

Comments

[Bogdan Buchko]

Спасибо, но я нашел еще более простой способ, но по вашему примеру, спасибо

Answer 2

[Bogdan Buchko]

https://codepen.io/DobsonDev/pen/ByaNZd

Answer 3

[Сергей Соколов]

Просто табы с вашей разметкой примерно так можно сделать:


Наверное, там должно быть иначе: первая кнопка "all" должна показывать вообще все, а остальные – фильтровать какую-то часть по классам. Но как спросили, так и вот..