CODEWITHSUNDEEP
jqueryhtmlcss
Payne
Payne

Reputation: 543

is there a better approach to this? Instead of individual click function

I am trying to create show and hide with three buttons and three contents. 

$( ".left-tab-header" ).click(function() {
                    $(".left-tab-content").toggleClass("show-tab-content");
                    $(".middle-tab-content").removeClass("show-tab-content");
                    $(".right-tab-content").removeClass("show-tab-content");
                    $(this).css("background", "#000");
                    $(".middle-tab-header").css("background","#020C15");
                    $(".right-tab-header").css("background","#020C15");
              });
     //click event for the middle-tab-header 
      $( ".middle-tab-header" ).click(function() {
                    $(".left-tab-content").removeClass("show-tab-content");
                    $(".middle-tab-content").toggleClass("show-tab-content");
                    $(".right-tab-content").removeClass("show-tab-content");
                    $(this).css("background", "#000");
                    $(".left-tab-header").css("background","#020C15");
                    $(".right-tab-header").css("background","#020C15");
              });

    // click event for the right-tab-header
     $( ".right-tab-header" ).click(function() {
                    $(".left-tab-content").removeClass("show-tab-content");
                    $(".middle-tab-content").removeClass("show-tab-content");
                    $(".right-tab-content").toggleClass("show-tab-content");
                    $(this).css("background", "#000");
                    $(".left-tab-header").css("background","#020C15");
                    $(".middle-tab-header").css("background","#020C15");
              });

I don't know if there is a function to simplify this. It works greatly without error. But I don't want to have individual click function with all repetitive parameters.

Upvotes: 1

Views: 49

Answers (1)

Moïze
Moïze

Reputation: 727

Here is a simple way using not(this) and 1 click event:

$( ".a, .b, .c" ).click(function() {
  $('button').not(this).removeClass('show-tab-content');
  $(this).toggleClass('show-tab-content');
});

You can try it here: https://jsfiddle.net/f7ur6pj8/

Edit:

Here is an update based on your case:

First, give another class to you 3 buttons (exp. tab-content)

<button class='left-tab-content tab-content'>A</button>   
<button class='middle-tab-content tab-content'>B</button> 
<button class='right-tab-content tab-content'>C</button>

And for your JavaScript:

$( ".left-tab-content, .middle-tab-content, .right-tab-content" ).click(function() {
  $(this).toggleClass('show-tab-content');
  $('.tab-content').not(this).removeClass('show-tab-content');
  $(this).css("background", "#000");
  $('.tab-content').not(this).css("background","#020C15");
});

Upvotes: 1

Related Questions