How to collapse tabs in jQuery?

Question

I'm using this Javascript script to display a list of Youtube channels related to a specific topic when this is chosen by the user, but if I click again on the name of the topic, its tab does not collapse. Instead it again shows the list of channels.

var channels=[
    { id:1, name:"Example 1", description:"", videos:[]},
    { id:2, name:"Example 2", description:"", videos:[]},
];

jQuery(function() {
    jQuery("#tabs").tabs();
    listChannels();
});

function listChannels(){
    jQuery(channels).each(function(i,channel){
        jQuery("#listOfChannels").append("<li id='channel"+channel.id+"'><span onclick='showChannel("+channel.id+")'>&gt; "+channel.name+"</span><div id='videos"+channel.id+"' class='contentChannel'></div></li>");
    });
}

maybe add a `select` option to tabs init and in that you could `hide` the tab..or maybe youre looking for Accordion - http://jqueryui.com/accordion/? — krishwader, Jun 04 '13 at 21:20
Writing inline `onclick` handlers via jQuery makes my eyes bleed. — moonwave99, Jun 04 '13 at 21:23
@moonwave99 using `onclick` with `each`. its a lethal combo isnt it? length of array === no of seperate onclick handlers :D — krishwader, Jun 04 '13 at 21:24
@moonwave99 you better correct his code than making this kind of comments, you see that he is new to stackoverflow. — Mehdi Karamosly, Jun 04 '13 at 21:25
Collapsing a tab doesn't mean anything, do you mean changing the active tabs ? If yes, have you read the jquery ui tabs documentation and what is blocking you ? [enable()](http://api.jqueryui.com/tabs/#method-enable) should be pretty straightforward — Lepidosteus, Jun 04 '13 at 21:28
@MehdiKaramosly actually he signed up before me, and "correcting" that code is out of the scope of the question. Still, he may find useful reading about [event delegation](http://api.jquery.com/on/). — moonwave99, Jun 04 '13 at 21:36

score 4 · Accepted Answer · edited May 23 '17 at 12:08

4

you could try setting collapsible: true in your tabs init. See Docs

 $( "#tabs" ).tabs({
  collapsible: true
 });

But in your situation, i feel like its better to use Accordion, a better visual representation for your channels.

AND, as @moonwave99 mentioned, its not good to use onclick attribute, especially in a loop. Read this question to know more. (Extras : Docs for event delegation ) Use click event handler which jquery provides.

$("#listOfChannels").on("click", "li" , function () {
   showChannel(this.id);
});

and, save your listChannels() from the evil clutches of onclick

jQuery(channels).each(function(i,channel){
    jQuery("#listOfChannels").append("<li id='channel"+channel.id+"'><span>&gt; "+channel.name+"</span><div id='videos"+channel.id+"' class='contentChannel'></div></li>");
});

edited May 23 '17 at 12:08

Community

1
1

answered Jun 04 '13 at 21:29

krishwader

11,341
1
34
51

Thanks, I'm going to try this. Indeed it is a code that is already implemented by somebody else and I was told today to learn jQuery and solve that :( – ssierral Jun 05 '13 at 03:51
Mark the answer as the correct answer if it helps you :-) learning jquery isn't that hard.. Docs are very good in jquery.com – krishwader Jun 05 '13 at 07:36

How to collapse tabs in jQuery?

1 Answers1