CODEWITHSUNDEEP
jquery
Alexander Kim
Alexander Kim

Reputation: 18382

making tabs functionality with jQuery without any other libraries than jQuery itself

HTML CODE:

  <ul class="toggler">
    <li><h2 class="heading-title"><a id="blog-toggler" class="inactive" href="#">Блог</a></h2></li>
    <li><h2 class="heading-title"><a id="wall-toggler" href="#">Стена</a></h2></li>
  </ul>

jQuery code:

if ($('#wall-toggler').hasClass('inactive')) {
    $('#wall-toggler').click(function() {
        $(this).removeClass('inactive');
        $('.group-wall').show();
        $('.group-blogs').hide();
        $('#blog-toggler').addClass('inactive');
        return false;
    });
} else {
    $('#wall-toggler').click(function(){
        return false;
    });
}


if ($('#blog-toggler').hasClass('inactive')) {
    $('#blog-toggler').click(function() {
        $(this).removeClass('inactive');
        $('.group-blogs').show(); // show the blog div
        $('.group-wall').hide(); // hide the wall div
        $('#wall-toggler').addClass('inactive');
        return false;
    });
} else {
    $('#blog-toggler').click(function(){
        return false;
    });
}

When i click on #blog-toggler all works as intended, but the problem starts when after #blog-toggler is clicked i am trying to click #wall-toggler -> nothing happens. What i am doing wrong? Thanks in advance.

live demo here: http://test.terra9.kz/group/brrrrrrrr-dva-tri-chetyre#

Take a look at buttons: "Блог", "Стена"

Upvotes: 1

Views: 526

Answers (2)

palaѕн
palaѕн

Reputation: 73896

Try this:

HTML

For the actual tabs, we are going to use unordered list. The HTML code is pretty straight forward.

<div id="tabs_container">
    <ul id="tabs">
        <li class="active"><a href="#tab1">Tab 1</a></li>
        <li><a class="icon_accept" href="#tab2">Tab with icon</a></li>
        <li><a href="#tab3">Long name for the last tab</a></li>
    </ul>
</div>

Class “icon_accept” is the class that contains the icon. Now if you wish to add different icon for each tab, you will need to create new class for each icon and add it to the tab.

And the HTML for the content DIVs.

<div id="tabs_content_container">
    <div id="tab1" class="tab_content" style="display: block;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.</p>
    </div>
    <div id="tab2" class="tab_content">
        <p>This tab has icon in it.</p>
    </div>
    <div id="tab3" class="tab_content">
        <p>Suspendisse blandit velit eget erat suscipit in malesuada odio venenatis.</p>
    </div>
</div>

jQuery

The jQuery code is really simple.

$(document).ready(function(){
    //  When user clicks on tab, this code will be executed
    $("#tabs li").click(function() {
        //  First remove class "active" from currently active tab
        $("#tabs li").removeClass('active');

        //  Now add class "active" to the selected/clicked tab
        $(this).addClass("active");

        //  Hide all tab content
        $(".tab_content").hide();

        //  Here we get the href value of the selected tab
        var selected_tab = $(this).find("a").attr("href");

        //  Show the selected tab content
        $(selected_tab).fadeIn();

        //  At the end, we add return false so that the click on the link is not executed
        return false;
    });
});

FIDDLE HERE That’s it :)

Upvotes: 5

NullPoiиteя
NullPoiиteя

Reputation: 57312

try something like

<ul class='tabs'>
    <li><a href='#tab1'>Tab 1</a></li>
    <li><a href='#tab2'>Tab 2</a></li>
    <li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'>
    <p>Hi, this is the first tab.</p>
</div>
<div id='tab2'>
    <p>This is the 2nd tab.</p>
</div>
<div id='tab3'>
    <p>And this is the 3rd tab.</p>
</div>

jquery

$('ul.tabs').each(function(){

    var $active, $content, $links = $(this).find('a');
    $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
    $active.addClass('active');
    $content = $($active.attr('href'));

    // Hide the remaining content
    $links.not($active).each(function () {
        $($(this).attr('href')).hide();
    });

    $(this).on('click', 'a', function(e){
        // Make the old tab inactive.
        $active.removeClass('active');
        $content.hide();

        $active = $(this);
        $content = $($(this).attr('href'));

        // Make the tab active.
        $active.addClass('active');
        $content.show();

        // Prevent the anchor's default click action
        e.preventDefault();
    });
});

Upvotes: 2

Related Questions