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

 

Link to comment
Share on other sites

Archived

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

  • Recently Browsing   0 members

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