Hi
I think that my situation is a bit different to this. https://www.chronoengine.com/forums/posts/f5/t99095/hide-or-show-containers-of-type-tab.html
I need to be able to hide a tab when there is no data for that tab.
[attachment=0]hideTab.png[/attachment]
In this example, there is data for the member but not for the partner. Once the form loads I decide if there is or is not a partner. I can then prevent the content appearing in the partner tab but need to hide that partner tab (ideally) or at least set the tab label to be empty. I presumed that I could use some javascript and DOM code to hide the tab. But the tag id is not easy to deduce. It doesn't seem to be to be related to the tab id other than the <a> tag in <ul><list> tag.
any suggestions greatly appreciated.
Regards
Nick
I think that my situation is a bit different to this. https://www.chronoengine.com/forums/posts/f5/t99095/hide-or-show-containers-of-type-tab.html
I need to be able to hide a tab when there is no data for that tab.
[attachment=0]hideTab.png[/attachment]
In this example, there is data for the member but not for the partner. Once the form loads I decide if there is or is not a partner. I can then prevent the content appearing in the partner tab but need to hide that partner tab (ideally) or at least set the tab label to be empty. I presumed that I could use some javascript and DOM code to hide the tab. But the tag id is not easy to deduce. It doesn't seem to be to be related to the tab id other than the <a> tag in <ul><list> tag.
any suggestions greatly appreciated.
Regards
Nick
Hi Nick,
I managed to hide the tab menu with this CSS
Bob
I managed to hide the tab menu with this CSS
div#chronoform-container-1 li:nth-child(2) {
display: none;
}
where container-1 is the id of the tabs area container and 2 is the index of the hidden tab, I think that could be applied with JavaScript - or you could use JavaScript to add a class to the tabs in a similar way and apply CSS to the class.
Bob
That does it Bob but with a slightly different approach.
I set a Load CSS on the form load and in there made the second tab not visible
Then I set up an event switcher with two events - 'member' and 'partner'. In the code I detected whether the partner exists and based on that return 'partner' or nowt.
Finally in the 'partner' event I made the tab visible again.
Bingo! Just what I wanted.
Thanks for the help
Nick
I set a Load CSS on the form load and in there made the second tab not visible
form#chronoform-bookingCourseOnLine
div.chronoform-container li:nth-child(2){
display:none;
}
Then I set up an event switcher with two events - 'member' and 'partner'. In the code I detected whether the partner exists and based on that return 'partner' or nowt.
<?php
if (isset($form->data['currentUserAndBookings']->Partner)) {
return 'partner';
}
?>
Finally in the 'partner' event I made the tab visible again.
form#chronoform-bookingCourseOnLine
div.chronoform-container li:nth-child(2){
display: block;
}
Bingo! Just what I wanted.
Thanks for the help
Nick
This topic is locked and no more replies can be posted.