Hide/Show Div's

[TWG]

I have some code, http://jsfiddle.net/maddtechwf/nmkB8/3/ , that I need some help with.

I need to have a div show based on prev/next buttons. I need all the divs to be hidden except for the active one until the next/prev button is pressed and the corresponding div is shown.

Right now all my divs show.

[srikarg]

@Maddtechwf I’m not sure if you mind using jQuery for this, but that’s what I used…Here’s a link to my solution: http://codepen.io/srig99/full/vgKbd.

[TWG]

@srig99 – That worked perfectly. Thank you for the help. I really appreciate it.

I have been told by users that the div’s are not hiding in IE8. Any ideas why?

[g3logic]

I have found the not() doesn’t work properly in IE8 properly. Since you are using not() to select the inactive div’s, I believe that could be your problem.

There are a bunch of different ways you can achieve what you are trying to do without using not()… although, not() would be my first choice if not for IE8. One way would be to add an additional class to all of the divs for the sole purpose of selecting them for the fade. Something like inactiveDiv. And then remove that class from the active div before fading. Since the active div no longer has that class, it won’t fade… only the others will. Then when you move on to the next, restore that class name to the div that you had removed it from.

Make sense?

[TWG]

@g3logic – I get what your saying. I’m not that good at jquery. Would you mind helping me a little more?

[g3logic]

Doh! Just realized that you’re only using not() to hide the divs initially (been a long day… sorry). So is the problem that the divs are not hiding initially in IE8? Or are they not fading out when you click Next?

[TWG]

The div’s don’t hide initially but when I click next, the next button doesn’t work either.

[g3logic]

OK, I’m referencing the CodePen solution. Try this:

Remove this line:
slides.not(slides.eq(current)).hide();

And replace with these two lines:
slides.hide();
slides.eq(current).show();

[TWG]

Okay, so I changed that line for the two lines you provided and my div’s still all show on one page. Do I need to do your original suggestion with the intactiveDiv class?

[srikarg]

Wow, I didn’t get notifications for this post these past few days, so sorry for the late reply. Anyways, I tried using classes to make a different version that might work for IE8 (stupid IE always causing problems :P). Can you try this and get back to me? I can’t test it in IE as I am using a Mac. Here’s the link: http://codepen.io/srig99/pen/itxrG.

[TWG]

When I run it in IE, it does the exact same thing as before.

[srikarg]

@Maddtechwf Ok, I’ll try something else then.

[srikarg]

@Maddtechwf Can you tell me if there are any errors in the JavaScript Console in IE8? Is it possible for you to post a screenshot here? Thanks.

[g3logic]

Just tried to view in IE8 and CodePen errors out, so I can’t see the code you’re using.

Can you post a version to your web server?

[srikarg]

@g3logic I updated the link, sorry about that.

[Author]

Posts