CODEWITHSUNDEEP
javascriptjqueryhtml
Iliana Núñez
Iliana Núñez

Reputation: 3

Jquery tab doesn't work

I'm learning jquery and I'm trying to make a tab. I can't realize why this doesn't work

Here I have my HTML

<div class="tab-panels">
    <ul class="tabs">
        <li rel="panel1"class="active">All</li>
        <li rel="panel2">Animals</li>
        <li rel="panel3">People</li>
        <li rel="panel4">Landscape</li>
    </ul>
    <div id="panel1" class="panel active">
        <img src="images/tab1.jpg"/>
        <img src="images/tab2.jpg"/>
    </div>
    <div id="panel2" class="panel">
        <img src="images/tab3.jpg"/>
        <img src="images/tab4.jpg"/>
    </div>
    <div id="panel3" class="panel">
        <img src="images/tab5.jpg"/>
        <img src="images/tab6.jpg"/>
    </div>
    <div id="panel4" class="panel">
        <img src="images/tab7.jpg"/>
        <img src="images/tab8.jpg"/>
    </div>
</div>

And here is my jquery

$(function(){
    $('.tab-panels .tabs li').on('click', function({
        var $panel = $(this).closest('.tab-panels');
        $panel.find('.tabs li.active').removeClass('active');
        $(this).addClass('active');

        var panelToShow = $(this).attr('rel');

        $panel.find('.panel.active').show(300, showNextPanel);

            function showNextPanel(){
            $(this).removeClass('active');

            $('#'+panelToShow).slideDown(300, function(){
                $(this).addClass('active');
            });
        });
    }));

I made this code from a video that I watched, for this person the code worked perfectly, so I don't understand why it doesn't work for me.

Upvotes: 0

Views: 72

Answers (4)

Stu Furlong
Stu Furlong

Reputation: 3629

You had syntax errors in your jQuery, try this:

$(function(){
    $('.tab-panels .tabs li').on('click', function(e){

        var $panel = $(this).closest('.tab-panels');
        $panel.find('.tabs li.active').removeClass('active');
        $(this).addClass('active');

        var panelToShow = $(this).attr('rel');

        $panel.find('.panel.active').show(300, showNextPanel);

        function showNextPanel(){
            $(this).removeClass('active');

            $('#'+panelToShow).slideDown(300, function(){
                $(this).addClass('active');
            });
        };
    });
 });

Quick JS Fiddle

Your first click function was not set up properly and the end wasn't closed right. You can usually solve something like this easier by keeping functions spaced out well, grouping your variables, etc..

Upvotes: 0

guest271314
guest271314

Reputation: 1

Syntax errors at .on('click', function({ , close of js });}));

Try to call .hide() on .panel before displaying .panel.active ; substitute .slideDown() for .show() 

$(function(){
    $(".tab-panels .tabs li").on("click", function(e) {
        $(this).siblings().add(".panel").removeClass("active");
        $(".panel").hide();
        $(this).addClass("active");

        var panelToShow = $(this).attr("rel");

        $("#" + panelToShow).addClass("active")
        .slideDown(300);
    })
});

jsfiddle http://jsfiddle.net/nLu4Lpoy/

Upvotes: 0

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

Seem like you misspelled the code(Assuming you have working css code for styling). See indicators shown below :

$(function () {
 $('.tab-panels .tabs li').on('click', function () { //<------ here
    var $panel = $(this).closest('.tab-panels');
    $panel.find('.tabs li.active').removeClass('active');
    $(this).addClass('active');

    var panelToShow = $(this).attr('rel');

    $panel.find('.panel.active').show(300, showNextPanel);

    function showNextPanel() {
        $(this).removeClass('active');

        $('#' + panelToShow).slideDown(300, function () {
            $(this).addClass('active');
        });
    } //<------ here
  });
}); //<------ here(must close dom ready function)

Upvotes: 0

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

Your forget to initialize it

try like this 

$(function() {
    $( ".tab-panels" ).tabs();
});

Upvotes: 2

Related Questions