CODEWITHSUNDEEP
javascriptjqueryhtmlcsstabs
ghosthunter
ghosthunter

Reputation: 303

How to hide other tabs content and display only selected tabs content with JQuery?

As you can see in HTML, there is six buttons which need to work as tab switcher buttons. Selected button must have additional class "current" so I can style current button (for example - current tab button class should be "buttons-regular-current").

Also I don't really know how to make these tabs work. I know I need to use JS/JQuery but don't have much experience with these things.

Information from "featured-table" div class should be non-hided by default and when I click on "Tab 1" button, information should change with information from "container-table-1" div container etc.

I am sorry for my bad english but I hope you will understand. :)

My HTML:

<div class="tabs-button-container">
  <div class="tabs-title">
    <h2>Block Title</h2>
  </div>
  <div class="buttons">
    <div class="buttons-featured"><a href="#">Featured Tab</a></div>
    <div class="buttons-regular"><a href="#">Tab 1</a></div>
    <div class="buttons-regular"><a href="#">Tab 2</a></div>
    <div class="buttons-regular"><a href="#">Tab 3</a></div>
    <div class="buttons-regular"><a href="#">Tab 4</a></div>
    <div class="buttons-regular"><a href="#">Tab 5</a></div>
  </div>
</div>

<div class="featured-table">
  <p>Tab content</p>
</div>
<div class="container-table-1" style="display:none">
  <p>Tab content</p>
</div>
<div class="container-table-2" style="display:none">
  <p>Tab content</p>
</div>
<div class="container-table-3" style="display:none">
  <p>Tab content</p>
</div>
<div class="container-table-4" style="display:none">
  <p>Tab content</p>
</div>
<div class="container-table-5" style="display:none">
  <p>Tab content</p>
</div>

Upvotes: 1

Views: 4702

Answers (3)

ImClarky
ImClarky

Reputation: 1953

You could make use of data attributes.

You could edit your tabs like so:

<div class="buttons">
  <div data-tabid="f" class="tab buttons-featured"><a href="#">Featured Tab</a></div>
  <div data-tabid="1" class="tab buttons-regular"><a href="#">Tab 1</a></div>
  <div data-tabid="2" class="tab buttons-regular"><a href="#">Tab 2</a></div>
  <div data-tabid="3" class="tab buttons-regular"><a href="#">Tab 3</a></div>
  <div data-tabid="4" class="tab buttons-regular"><a href="#">Tab 4</a></div>
  <div data-tabid="5" class="tab buttons-regular"><a href="#">Tab 5</a></div>
</div>

This adds the data attributes which will act as an identifier to the tab. Also the class tab has been added to allow us to grab the tab in jQuery.

Next change your containers to match the data attributes in the tabs

<div class="wrapper">
  <div class="featured-table" data-blockid="f">
    <p>Tab content f</p>
  </div>
  <div class="container-table-1" data-blockid="1" style="display:none">
    <p>Tab content 1</p>
  </div> 
  <div class="container-table-2" data-blockid="2" style="display:none">
    <p>Tab content 2</p>
  </div> 
  <!-- and so on -->
</div>

Note that I have added a wrapper div around the containers

Now using jQuery

$('.tab').click(function(){
  var tabID = $(this).data('tabid'); // Get the tab ID data attribute

  // Remove all instances of "current" class from tabs
  $('.buttons').children().removeClass('current');

  // Add "current" class to selected tab
  $(this).addClass('current');

  // Hide all elements under the wrapper class
  // Same thing can be achieved with .children().css("display", "none");
  $('.wrapper').children().hide(); 

  // Show the container using the data attribute "blockid" as a selector
  // Again same thing with .find("[data-blockid="+tabID+"]").css("display", "block");
  $('.wrapper').find("[data-blockid="+tabID+"]").show();
});

Here is a JSFiddle

Upvotes: 1

Jordan Lowe
Jordan Lowe

Reputation: 368

Four ways to hide and show:

$(element).fadeIn(200)
$(element).fadeOut(200)

$(element).show()
$(element).hide()

$(element).css('display', 'block')
$(element).css('display', 'none')

$(element).removeClass('hide').addClass('show')
$(element).removeClass('show').addClass('hide')

Thus:

// If a button is clicked
$(".buttons-regular").click(function()
{
     // Would require needing to hide all others
     //check which button was clicked via $(this)
     if($(this).text() == "Tab 1")
          // Show content
          $('.container-table-1').fadeIn(200);
}

Upvotes: 3

Alfred Woo
Alfred Woo

Reputation: 716

Add a class name in container-table so you can handle it later like 

...
<div class="tab container-table-3" style="display:none">
  <p>Tab content</p>
</div>
<div class="tab container-table-4" style="display:none">
  <p>Tab content</p>
</div>
<div class="tab container-table-5" style="display:none">
  <p>Tab content</p>
</div>

And then, when button clicked, execute this script: $(".tab").css("display", "none"). And show the div what you are going to show with $(SOME_CLASS).css("display", "block).

You also can do similar in buttons too so you can make a clicked effect or something else. Maybe you can use addClass() or removeClass() method for buttons.

https://jsfiddle.net/h213ue65/1/ Check out in jsfiddle!

Upvotes: 1

Related Questions