Jump to content

Hiding custom tab if custom field isnt filled


Ramon Mol

Recommended Posts

Posted

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>
</ul>

<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>

<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>

                      
<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}">
</div>                     

<script>
document.getElementById("defaultOpen").click();
</script>

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:

1.thumb.png.e17132fb58dbcce79af8f221af569903.png

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.

BUT

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:

2.thumb.png.7a78c18340da6065066612979b1e81e0.png

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.

 

Archived

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

  • Recently Browsing   0 members

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