CODEWITHSUNDEEP
javascriptjquery
vanntile
vanntile

Reputation: 2787

jQuery tabs are shown and hidden

I have the following configuration:

var pageone = document.getElementById("pageone"),
    pagetwo = document.getElementById("pagetwo"),
    pagethree = document.getElementById("pagethree"),
    bfpone = document.getElementById("buttonone"),
    bfptwo = document.getElementById("buttontwo"),
    bfpthree = document.getElementById("buttonthree");
$(pagetwo).hide();
$(pagethree).hide();
$(bfpone).click(function () {
    $(pageone).show();
    $(pagetwo).hide();
    $(pagethree).hide();
});
$(bfptwo).click(function () {
    $(pageone).hide();
    $(pagetwo).show();
    $(pagethree).hide();
});
$(bfpthree).click(function () {
    $(pageone).hide();
    $(pagetwo).hide();
    $(pagethree).show();
});
.page{
    background:red;
    color:white;
    margin:2em;
    padding:1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttonone">Btn one</div>
<div id="buttontwo">Btn two</div>
<div id="buttonthree">Btn three</div>
<div id="pageone" class="page">Pageone</div>
<div id="pagetwo" class="page">Pagetwo</div>
<div id="pagethree" class="page">Pagethree</div>

When hitting a div specific to a page, the selected page show, while the others are hidden.

It works fine, but I want a jQuery script more efficient that, when I add any number of pages, works without having to be modified (or at least works without adding a lot more code). The only condition is that it has to use javascript and jQuery only.

Thank you.

Upvotes: 4

Views: 232

Answers (4)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

You have just to use jquery click() function, to reduce the code :

HTML :

<div id="buttonone" data-page='1' class='button'>Btn one</div>
<div id="buttontwo" data-page='2' class='button'>Btn two</div>
<div id="buttonthree" data-page='3' class='button'>Btn three</div>

<div id="page_1" class="page" style='display:block'>Pageone</div>
<div id="page_2" class="page" style='display:none'>Pagetwo</div>
<div id="page_3" class="page" style='display:none'>Pagethree</div>

JS :

$('.button').click(function () {
    $('.page').hide();
    $('#page_'+$(this).data('page')).show();
});

Find Worked Fiddle HERE.

Upvotes: 1

AKD
AKD

Reputation: 3964

$('.page:gt(0)').hide();
$('.btn').each(function(){
var $btn = $(this);
var index = $btn.attr('rel');
$btn.click(function () {
    $('.page').hide();
    $('.page[rel="' + index + '"]').show();
});
});
.page{
    background:red;
    color:white;
    margin:2em;
    padding:1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div rel="1" class="btn">Btn one</div>
<div rel="2" class="btn">Btn two</div>
<div rel="3" class="btn">Btn three</div>
<div rel="1" class="page">Pageone</div>
<div rel="2" class="page">Pagetwo</div>
<div rel="3" class="page">Pagethree</div>

In above example only you have to sync the rel attribute.

Upvotes: 0

Vecihi Baltacı
Vecihi Baltacı

Reputation: 352

You can use jQuery tabs. And you can configure it with tab indexes. For Example; $("#yourDivName").tabs(); Then you can set which is active on initialization. Which is disabled or enabled, shown or hidden. You can follow this link;

https://api.jqueryui.com/tabs/

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388436

You can use a generalized solution like below, instead of using individual handler for each element

var $pages = $('.page');
$pages.slice(1).hide();
$('.trigger').click(function() {
  var $target = $('#' + $(this).data('target')).show();
  $pages.not($target).hide()
});
.page {
  background: red;
  color: white;
  margin: 2em;
  padding: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="trigger" data-target="pageone">Btn one</div>
<div class="trigger" data-target="pagetwo">Btn two</div>
<div class="trigger" data-target="pagethree">Btn three</div>
<div id="pageone" class="page">Pageone</div>
<div id="pagetwo" class="page">Pagetwo</div>
<div id="pagethree" class="page">Pagethree</div>

Upvotes: 2

Related Questions