Tab Content Not Showing, But Tabs Change

[dave8794]

Hi. I have two accordions on my page. They are identical except that content is a little different in the second accordion. Accordion 1 will show on large screens, accordion 2 hidden. Vice Versa on mobile. Each accordion has two panels, The first panel is open onload, the second panel closed. When the second panel is opened, this goes for both accordions, it displays a tabbed section, where the first tab is selected and the content shown.

Everything mentioned above works. The problem is when i select any of the other tabs in the second panel of accordion 2, which only shows on mobile, the tab changes but the content for that tab doesn’t display. If I go back to the first tab that was selected by default onload and displayed the tab content, it no longer shows the content. Also, when you try to close the second panel, it slides up, then goes right back down into open position.

Again, just for clarity, my first accordion does everything perfectly. The second accordion is having the problems.

Here is my script:

Accordion 1 (Large Screen)

$(".desc").hide();
    $(".desc:first").show(); // THIS LINE IS ADDED!!!
$("h3.open-close").click(function(){
if ($(this).is(".current"))
{
$(this).removeClass("current");
$(this).next(".desc").slideUp(400);
}
else
{
$(".desc").slideUp(400);
$("h3.open-close").removeClass("current");
$(this).addClass("current");
$(this).next(".desc").slideDown(400);
}
});

Accordion 2 (Mobile Screen)

$(".desc2").hide();
    $(".desc2:first").show(); // THIS LINE IS ADDED!!!
$("h3.open-close").click(function(){
if ($(this).is(".current2"))
{
$(this).removeClass("current");
$(this).next(".desc2").slideUp(400);
}
else
{
$(".desc2").slideUp(400);
$("h3.open-close").removeClass("current");
$(this).addClass("current");
$(this).next(".desc2").slideDown(400);
}
});

[PaulOB]

Do you have a link to the page or at least html to go with the js.

I don’t see why you need two routines to do this and indeed you have conflicts in your code as you have 2 click functions for the same element ($(“h3.open-close”).click(function(){) and the else statement is likely to be parsed twice.

If you wanted a separate routine then change the class names so that there is no conflict (open-close2 perhaps). You also seem to be checking for .current2 and then removing .current which will remove it from both sets of html in the else statement.

[dave8794]

Terribly sorry for the late response. I just decided to scrap this. Thank you for the help PaulOB.