Jump to content

Hiding custom tab if custom field isnt filled

Ramon Mol

Recommended Posts

Hi guys,

Im am using the following code on my website to create a Tab Menu which shows different 3 different profiles when clicked on the corresponding tab:

<ul class="tab">
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">2016</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Paris')">2021</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Tokyo')">2026</a></li>

<div id="London" class="tabcontent">
<img alt="2016" class="ipsImage ipsImage_thumbnailed" data-fileid="19535" data-unique="q23ow2wn2" src="{$record->customFieldDisplayByKey('profile2016_170', 'listing')|raw}">


<div id="Paris" class="tabcontent">
<img alt="2021" class="ipsImage ipsImage_thumbnailed" data-fileid="19536" data-unique="n4hjb7kbh" src="{$record->customFieldDisplayByKey('profile2021_171', 'listing')|raw}">

<div id="Tokyo" class="tabcontent">
<img alt="2026" class="ipsImage ipsImage_thumbnailed" data-fileid="19537" data-unique="1izghzu4d" src="{$record->customFieldDisplayByKey('profile2026_172', 'listing')|raw}">


To fill the tabs I have created three custom fields and added the code so if a profile is uploaded, it is shown in the correct tab. For example: src="{$record->customFieldDisplayByKey('profile2021_171', 'listing')|raw}">

I have managed to make it work so far and it showd the content I would like it to show as followed:


People can now upload a screenshot of a profile and if it is uploaded in the correct custom field (2016, 2021 or 2026) the screen will be visible in the correct tab.


I would like to hide a tab if there isn't a screen uploaded. For example; if I upload a 2016 screen, but not a 2021 or 2026, I would like those two tabs to be hidden, only showing the tab(s) which is filled in correctly, like:


Is there anyone who can help me with this? I have tried various {if} codes, but haven't been able to get this working.

Many thanks in advance.


Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...