Conditional to check if class exists not working

JavaScript
1

I have a script that shows a list of tabs/buttons. When a tab is clicked, the tab expands (showing more content), and it shows an image to the right. If you click another tab, the new tab expands and the other closes (see the codepen here: https://codepen.io/jabbamonkey/pen/eYoXJao and the javascript is at the bottom of the page)

I am having a problem making the tabs all be closed when a user goes to this page, but want all tabs to be closed ONLY if javascript sees a parent div tag with a specific class (i.e. if a div with a class “tabsleft-container” has another class called “firsttabopen”).

I set a conditional at the end of the javascript … to check and see if a class exists (checks the div with “tabsleft-container” to see if the class “firsttabopen” exists). If the “firsttabopen” class exists, it should run the final “changeTab” line (that opens the first tab) … but if the class doesn’t exist, all the tabs should be closed when the page loads (because the “changeTab” doesn’t run).

The conditional works… HOWEVER, if there are two instances of “tabsleft-container” … and only one contains the class “firsttabopen” … then it runs the “changeTab” code and the first tab is expanded on ALL sets of the code. I need the code to run “changeTab” on only the CHILDREN of the div that has the class “firsttabopen”.

Can someone help me with this?

Codepen link is above. Javascript is below:

$(document).ready(function () {
  const firstmenucontents = $(".tabsleft-container");

  firstmenucontents.each((index, firstmenucontent) => {
    const copy = $(firstmenucontent).find(".bannerpane img").clone();
    copy.css("visibility", "hidden");
    $(firstmenucontent).find(".bannerpane-container").append(copy);

    let selecteditem = 0;

    let textpaneItemIndex = -1;
    const changeTab = (index, item) => {
      var delay = 300;

      if (window.innerWidth < 980) {
        delay = 800;
      }
      if (textpaneItemIndex !== index) {
        if (textpaneItemIndex !== -1) {
          $(firstmenucontent)
            .find(".textpane-item-container")
            .eq(textpaneItemIndex)
            .children(".textpane-subitem")
            .slideUp(delay);
          $(firstmenucontent)
            .find(".textpane-item-container")
            .eq(textpaneItemIndex)
            .removeClass("clicked");
          $(firstmenucontent)
            .find(".textpane-item-container")
            .eq(textpaneItemIndex)
            .children(".textpane-item")
            .children("img")
            .css("transform", "");
          $(firstmenucontent)
            .find(".bannerpane")
            .eq(textpaneItemIndex)
            .removeClass("bannerpane-animation");
        }
        $(firstmenucontent)
          .find(item)
          .children(".textpane-subitem")
          .slideDown(delay);
        $(firstmenucontent).find(item).addClass("clicked");
        $(firstmenucontent)
          .find(".bannerpane")
          .eq(index)
          .addClass("bannerpane-animation");
        textpaneItemIndex = index;

        $(firstmenucontent)
          .find(item)
          .children(".textpane-item")
          .children("img")
          .css("transform", "rotate(-180deg)"); // Corrected typo herea
      }
    };
    $(firstmenucontent)
      .find(".textpane-item-container")
      .each((index, item) => {
        $(firstmenucontent)
          .find(item)
          .click(() => {
            changeTab(index, item);
            selecteditem = index;
          });
      });

        if($(firstmenucontents).hasClass('firsttabopen')) {
    changeTab(0, $(firstmenucontent).find(".textpane-item-container").eq(0));
}
  });
});

Note: Someone else coded the javascript for this and my knowledge of javascript is really limited.

1 Like
2

Hi @nyctri76, it’s just a small logical issue: you’re checking if firstmenucontents (with plural “s”) has that class, which is the collection of all your tab modules; hasClass() then checks for the first element in that collection, which returns true for all tab modules. You need to check if

$(firstmenucontent).hasClass('firsttabopen')

instead, which refers to the current tab module.

3

Ug … That’s frustrating. Thanks for pointing it out! Seems to work fine now!

4

Glad I could help. :-)

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.