JavaScript Conditional to check if class exists not working...

[jabbamonkey]

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. However, the conditional isn't working. It is assuming the "firsttabopen" class exists, and is running the "changeTab" line always...

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

Below is the javascript:

$(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).classList.contains('firsttabopen')) {
        changeTab(0, $(firstmenucontent).find(".textpane-item-container").eq(0));
    }

  });
});

 

[jabbamonkey]

So, I changed classList to hasClass('firsttabopen') ... and that works.

HOWEVER, if there are two instances of tabsleft-container ... and only one contains the class "firsttabopen" ... then it runs the code above and the first tab is expanded on all sets of this code. I need the code to run "changeTab" on only the CHILDREN of the div that has the class "firsttabopen"

 

[jabbamonkey]

Alright, I got it. had a typo in the class name which wasn't making it work (firstmenucontents => firstmenucontent) ... It's good now...