Menu icon Foundation
Accordion / Tabs for IE8

I have a new site build with F5. Unfortunately the site requires IE8 support..
The site is a simple One-Page Website. The "Main-Navigation" I created with an Accordion-JS.
Within the Accordion it has different "Sub-Navigations" for the whole content of the website. Those i created with Tabs-JS.

How can this site structure be displayed in ie8?

A workaround for the css i found on this post:
http://foundation.zurb.com/forum/posts/241

But how do I get all the javascripts to run ?

Thanks for helping me.

ie8javascriptaccordiontabsFoundation 5

I have a new site build with F5. Unfortunately the site requires IE8 support..
The site is a simple One-Page Website. The "Main-Navigation" I created with an Accordion-JS.
Within the Accordion it has different "Sub-Navigations" for the whole content of the website. Those i created with Tabs-JS.

How can this site structure be displayed in ie8?

A workaround for the css i found on this post:
http://foundation.zurb.com/forum/posts/241

But how do I get all the javascripts to run ?

Thanks for helping me.

Robocop about 5 years ago

Unfortunately I have not found a solution.
Any help?

Mo about 5 years ago

Hey Rob

I'm looking for a similar solution. Did you get it figured out? Just let me know. Would love to get this one figured out.

_mo

Michael Degli-Angeli about 5 years ago

Tabs did not work for me either in IE8. Step one is downgrade your jquery to 1.9.1 and place it in the head of your html. Then I have the following code run the tabs properly.

   var nav = navigator.userAgent;

   $('#tabs').on('click', 'a', function (event) {

      if(nav.indexOf("MSIE 8.0") > -1)
      {


        var panel1 = $("#panel1");
        var panel2 = $("#panel2");
        var panel3 = $("#panel3");
        var panel4 = $("#panel4");


        var currentPanel = "#" + this.href.split('#')[1];
        var currentElement = $(currentPanel);

        if(currentPanel == "#panel1")
        {
          //console.log(currentPanel);
          panel2.removeClass("active").css("display", "none");
          panel3.removeClass("active").css("display", "none");
          panel4.removeClass("active").css("display", "none");
          currentElement.addClass("active").css("display", "block");
        }
        else if(currentPanel == "#panel2")
        {
          //console.log(currentPanel);
          panel1.removeClass("active").css("display", "none");
          panel3.removeClass("active").css("display", "none");
          panel4.removeClass("active").css("display", "none");
          currentElement.addClass("active").css("display", "block");
        }
        else if(currentPanel == "#panel3")
        {
          panel1.removeClass("active").css("display", "none");
          panel2.removeClass("active").css("display", "none");
          panel3.removeClass("active").css("display", "none");
          currentElement.addClass("active").css("display", "block");
        }
        else if(currentPanel == "#panel4")
        {
          panel1.removeClass("active").css("display", "none");
          panel2.removeClass("active").css("display", "none");
          panel3.removeClass("active").css("display", "none");
          currentElement.addClass("active").css("display", "block");
        }

      }

  });

Martin Eberle over 4 years ago

Hi Rob,

as Michael already said, downgrade jQuery to 1.x.

I refactored Michaels solution, in order to work for any tabs and work on pageload as well:

       var nav = navigator.userAgent;

      if(nav.indexOf('MSIE 8.0') > -1)
      {
        // on load show only first tab
        $('.content', '.tabs-content').removeClass('active').css('display', 'none');
        $('.content:first-child', '.tabs-content').addClass('active').css('display', 'block');

        // When user clicks on tabs link
        $('.tabs dd').on('click', 'a', function (event) {

          var currentPanel = '#' + this.href.split('#')[1];
          var currentElement = $(currentPanel);

          $(this).parents('.tabs').next('.tabs-content').children('.content').removeClass('active').css('display', 'none');
          currentElement.addClass('active').css('display', 'block');

        });
      }

Hope this helps you!