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>

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>

• javascript
• jquery
• html
• css
• tabs

• 1 jqueryui./tabs – Rory McCrossan Commented Feb 23, 2016 at 9:21

3 Answers 3

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);
}

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

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/h213ue65/1/ Check out in jsfiddle!