Display content when tab is chosen (Foundation)

I have a question regarding the use of Zurb Foundation 6 Tabs and some JavaScript functionality. Below is the HTML code for a layout with 3 tabs:

<ul class="tabs" data-tabs id="myTabs">     
    <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1 Info</a></li>
    <li class="tabs-title"><a href="#panel2">Tab 2 Info</a></li>
    <li class="tabs-title"><a href="#panel3">Tab 3 Info</a></li>
</ul>

<div class="tabs-content" data-tabs-content="myTabs">
    <div class="tabs-panel is-active" id="panel1">
    ....
    </div>
    <div class="tabs-panel" id="panel2">
    ....
    </div>
    <div class="tabs-panel" id="panel3">
    ....
    </div>
</div>

The tabs are functioning correctly, but I want to dynamically load content into Tab 3 only when it is clicked. I plan to use ajax for this purpose. The Zurb Foundation 6 documentation provides a JavaScript event that triggers whenever any tab is clicked:

 $('#myTabs').on('change.zf.tabs', function() {
      console.log('Those tabs sure did change!');
 });

However, I need an event to trigger only when panel3 is selected. How can I achieve this?

javascriptjquerycssajaxzurb-foundation

Answer №1

To implement a condition within the 'change.zf.tabs' event, you can follow this example:

$('#myTabs').on('change.zf.tabs', function() {

  if($('#panel3:visible').length){
    console.log('Tab 3 is currently displayed!');
  }

});

Answer №2

If you are working with Foundation 6 (latest version being 6.2.1), the code snippet below will help you retrieve the ID of the tab that has been changed:

$('#myTabs').on('change.zf.tabs', function()
{
    var tabId = $('div[data-tabs-content="'+$(this).attr('id')+'"]').find('.tabs-panel.is-active').attr('id');
    alert(tabId);
});

Answer №3

To ensure that content is only loaded when a specific tab with a certain id is selected, you can add a condition like this:

$('#myTabs').on('change.zf.tabs', function() {
   if ($(this).attr('id') == 'panel3')
   {
        //Load content here 
   }
});

I hope this explanation helps clarify things.

Answer №4

After encountering this issue, I found a solution:

Ultimately used the following code snippet:

$(this).find('.is-active a').attr('id')

Answer №5

Success is on my side when using Foundation 6:

$('.tabs').on('change.zf.tabs', function(event, tab){
    console.log(tab.children('a').attr('id'));
    console.log(tab.children('a').attr('href'));
});

Answer №6

When working with Foundation 6, my approach involved:

$("#section-tabs").on('change.zf.tabs', function (event, tab) {
        var tabId = tab.attr("id");
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery/AJAX for nested functions, as well as utilizing the Clone and Cufon properties

Currently utilizing Cufon to easily transform fonts into canvas. This script specifically transforms H1 headers: Cufon.replace('h1', { fontFamily: 'SuperMegaArial2010' }); While everything is functioning correctly, I encounter an is ...

jqueryajaxclonecufon

Having trouble triggering a click event with JQuery

I have a hidden link for downloading Audio Files that I want the user to access using a button. However, I am having trouble triggering the click event. Below is the HTML code: <a class="APopupDown" data-icon="home" id="DownloadFile" href="http://yaho ...

javascriptjqueryhtmlclicksimulate

Is there a more effective approach to managing an array of objects retrieved from an API call?

I'm attempting to extract an array of names from a JSON response that contains an array of objects, but I'm running into issues. When I try to print the array, it shows up empty. Is this the correct way to go about it? There don't seem to be ...

javascriptreactjs

Troubleshooting the CSS problem with vertical tab borders

Below is the code snippet. Make use of jsfiddlelink/show link for a precise view. JSFIDDLE This displays a vertical tab using jQuery. In this implementation, I utilized box-shadow: 2px 2px 2px 1px #888888;, which prevented me from using border-right: 3p ...

jqueryhtmlcss

Using nodeJS to showcase content on a web page

I'm relatively new to NodeJS, and I am trying to figure out if there is a way to utilize NodeJS similar to JavaScript. My goal is to retrieve data from a database and display it within a div on my index.html page. When attempting to use querySelector, ...

javascripthtmlnode.jsexpress

Tips for updating or toggling an icon within a button with the help of Bootstrap 5 and jQuery

Looking to switch the icon displayed inside a button upon clicking? The initial icon is <i class="fas fa-bars"></i>, and after being clicked, it should change to <i class="fas fa-times"></i>. How can this be ach ...

javascripthtmljquerycssbootstrap-5

Is it possible for one AngularJS application to influence another?

In my latest AngularJS project, I developed an application for user creation. Depending on the selected user type, specific input fields are displayed. Upon submission, the data is sent to the server in JSON format. So far, everything is working smoothly. ...

javascriptjqueryangularjs

Issue with TypeORM custom repository not successfully overriding the createQueryBuilder function

I have successfully implemented database i18n for TypeORM in theory. Now, I am looking to override built-in repository methods to incorporate i18n by intercepting them and adding a query. However, I am facing difficulties with overriding the createQueryBui ...

javascriptnode.jstypescriptexpresstypeorm

Having trouble updating the value of my textfield in material-ui using formik

Below is the code I'm working with to set a default value using the material-ui Textfield API within a formik fieldarray: <TextField name={`myGroups.${index}.myGroupName`} value={`Group ${index+1}`} label="Group" InputProps={{ ...

javascriptreactjsmaterial-uiformik

Enjoy the convenience of accessing your QR code result with just a click on the link provided

Stumbled upon this code snippet on . It allows scanning QR codes and displaying the results as plain text. However, I wanted the result to be a clickable link, like www.google.com/(qrcodescanresult). <script src="html5-qrcode.min.js">< ...

javascripthtml

I'm having trouble with my useState in React/NEXTjs because it's not adding onto the result of a socket.io event from the server, it's simply

Frameworks used: Next.js, Socket.io, React I am currently working on a straightforward messaging application. The main concept involves emitting a message typed by a user, sending that message to the server, and then broadcasting it back to all clients th ...

javascriptreactjswebsocketsocket.ionext.js

Ensure that hyperlinks remain unbroken and do not split over two lines

When I generate links using $_GET [Array] to display in a box, I aim to have 5-10 links per line without any of them appearing on two lines. While I currently use {text-align:justify;} for consistent border spacing, I am seeking a method to prevent the lin ...

phpcss

Tips for effectively drying up sass mixin code using before and after blocks

Here is the SCSS code I currently have: @if $position == bottom { &:after { height: $triangle-width; width: $triangle-width; content:""; position:absolute; margin-top: -$triangle-width/2 -$stroke-width; } } @if ...

csssassdrymixins

I am facing an issue where the CSS style sheet is not connecting to my HTML file

I'm facing an issue with linking my CSS style sheet to my HTML file using the following code: <link ref="stylesheet" href="../landing/css/stylesheet.css" type="text/css"/> Even though I have checked the directory l ...

htmlcss

Having trouble with Instafeed JS loading?

I am currently experimenting with instafeed.js, but I am encountering difficulties getting it to load on a basic bootstrap page. While everything else on my page loads successfully, this particular container remains empty without any Instagram code presen ...

javascriptbootstrap-4instafeedjs

How to eliminate gaps in CSS grid for optional areas

I've recently started experimenting with CSS grid and I have to say, it's pretty amazing! I'm currently working on a basic layout for mobile devices and using media queries to adjust the layout as the screen size increases. At the moment, m ...

htmlcssgrid-layoutcss-grid

W3C Validation with a Dynamic Twist

I currently have a small feature on my website that indicates the validity of the markup for the current page. It is currently set as "HTML5 Valid", but I am thinking about making it more dynamic. I want it to automatically check if the page's markup ...

phpjavascriptvalidationw3c

Occupying both horizontal and vertical space in a Bootstrap column

I have set up my buttons like this: https://i.stack.imgur.com/OMfhp.png In the image, you can see that the Left Option Button is larger, and I want all buttons to be like that. They are supposed to be aligned next to each other as I am using the Bootstra ...

htmlcsstwitter-bootstrap

canvas resolution adjustments

I've created a unique function that can transform text into an image by following this reference: Convert Text to Image using javascript <canvas id='textCanvas' height=20></canvas> <img id='image'> <br> < ...

javascriptcanvas

Display an alert when no matches are found in autocomplete suggestions

I am implementing the code below to populate a textbox with data. If I input a, all records starting with a are displayed in the dropdown from the database. However, if I input a value that does not exist in the database, there is no message like "No Recor ...

javascriptjqueryjquery-ui-autocomplete