Hi Miguel. Odd. Titulo is cool though and once you know how to edit/make variables you are off to the races ...
Justin, i wonder is there a way to temporary hide a tab, something like this:
{GENERICO:type="tabs"}
{GENERICO:type="tabitem"}
CONTENT
{GENERICO:type="tabitem_end"}
{GENERICO:type="tabitem", hidden=true}
CONTENT2
{GENERICO:type="tabitem_end"}
{GENERICO:type="tabs_end"}
Btw, i'm working with Moodle 3.10.
Thx in advance!!
{GENERICO:type="tabs"}
{GENERICO:type="tabitem"}
CONTENT
{GENERICO:type="tabitem_end"}
{GENERICO:type="tabitem", hidden=true}
CONTENT2
{GENERICO:type="tabitem_end"}
{GENERICO:type="tabs_end"}
Btw, i'm working with Moodle 3.10.
Thx in advance!!
Hi Juan
There is no way to hide tabs right now. Its possible though. But there is no point in adding a hide feature without a show feature. And that "show" would need to be done in javascript. Which would be outside the scope of the Generico template really. Because your own code would need to detect some trigger of your own need, and then find the correct hidden tab and show it. If you can do all that, then you can probably modify the template to suit your need. But if you can not do all that, then I think you might be better to find another way. These are jquery ui tabs, so this page might help: https://stackoverflow.com/questions/24677277/jquery-tabs-how-to-hide-single-tab
You would need to add the style="display: none" when the tab is created in the tabs template.
And in the tabitem template you would need to take your custom "hidden=true" parameter and put a css attribute on the tab item so that the js in the tabs template can see that this is a hidden tab. And then it will apply the : style="display: none"
If that all sounds too much, best to just move on.
Bootstrap tabs are much easier and if your theme supports it , which is highly likely. A simple template based on that might be better:
https://getbootstrap.com/docs/4.0/components/navs/
There is no way to hide tabs right now. Its possible though. But there is no point in adding a hide feature without a show feature. And that "show" would need to be done in javascript. Which would be outside the scope of the Generico template really. Because your own code would need to detect some trigger of your own need, and then find the correct hidden tab and show it. If you can do all that, then you can probably modify the template to suit your need. But if you can not do all that, then I think you might be better to find another way. These are jquery ui tabs, so this page might help: https://stackoverflow.com/questions/24677277/jquery-tabs-how-to-hide-single-tab
You would need to add the style="display: none" when the tab is created in the tabs template.
And in the tabitem template you would need to take your custom "hidden=true" parameter and put a css attribute on the tab item so that the js in the tabs template can see that this is a hidden tab. And then it will apply the : style="display: none"
If that all sounds too much, best to just move on.
Bootstrap tabs are much easier and if your theme supports it , which is highly likely. A simple template based on that might be better:
https://getbootstrap.com/docs/4.0/components/navs/
Justin
At the moment i'm just making the generico unrecognizable for Moodle adding a simple "x", like this:
{GENERICO:type="tabs"}
{GENERICO:type="tabitem"} inhoud {GENERICO:type="tabitem_end"}
{GENERICO:type="tabitem"} gfdgfdgfd {GENERICO:type="tabitem_end"}
{GENERICO:type="tabitemx"} dfdsfdsfdsfs {GENERICO:type="tabitem_end"}
{GENERICO:type="tabs_end"}
I hope thissimple solution doesn't cause other problems.
Thanks for your fast reply!
btw: Bootstrap is amazing also but adding tabs is not that easy for ppl without html knowledge. Generico is still the most used in our school.
Hi Juan. Thats a very cosmic solution. It made me smile.
.. but it could do bad things.
The start tag often open a div, and the end tags close it.
But if the start tag is an unrecognized template, it will just be replaced with an empty string.
However in your example the end tag would be recognized, and would be replaced with the closing div. And that could then be closing some other containers div. The result of which could be messed up html, eg divs that disappear/truncate or go on forever.
How about you just make a "hiddentabitem" template, eg {GENERICO:type="hiddentabitem"} , which is shameless clone of the "tabitem" template but which adds style="display: none" in the relevant location.
However in your example the end tag would be recognized, and would be replaced with the closing div. And that could then be closing some other containers div. The result of which could be messed up html, eg divs that disappear/truncate or go on forever.
How about you just make a "hiddentabitem" template, eg {GENERICO:type="hiddentabitem"} , which is shameless clone of the "tabitem" template but which adds style="display: none" in the relevant location.
Hey Justin,
Thx again for your reply. Your simple solution worked like a charm.
My knowledge of javascript is very limited to integrate the hide function on the tabitem but the solution you suggested works fine at the moment.
Cheers!
Cool. simple is good.
Justin,
I'm still having troubles displaying this tabs on the Moodle app. Is there something i have to change maybe in the css?
Thx again.
Juan Carlos
I'm still having troubles displaying this tabs on the Moodle app. Is there something i have to change maybe in the css?
Thx again.
Juan Carlos
I doubt it will work in the Moodle Mobile App unfortunately. The JS and CSS probably wont get loaded.