CSS positioning issue with jQuery

[croydon86]

Hi Guys

Just wanted your help on a CSS Positioning issue. Here is the link to the code on code pen… http://codepen.io/anon/pen/FKdLq

When you click on ‘Latest News’ the text slides in and out, however the actual button itself stays static. What I would like is for the ‘Latest News’ button to slide with the text when clicked but cannot figure it out :|

The whole thing needs to be fixed to the browser window on the right.

Any help would be appreciated.

P.S. I am extremely new to jQuery, is my jQuery code ‘clean’? ;)

[croydon86]

Andy your a star!

That is spot on. I foolishly was thinking about the child-parent element but of course the latest news button was not a child, so your right, they both need to be animated.

I have just done some messing about here made the button the child element, and of course, it now works that way also… http://codepen.io/anon/pen/Dapms

Only problem with this though is I can’t see why z-index isn’t working on the button, so it is behind the grey .box and drop shadow.

Do you see why thats not working? The main problem is already fixed, this is just out of curiosity.

[croydon86]

just tried it in chrome and same problem, (was using safari on mac).

The button should be behind the shadow. I removed the z-index on .box and applied a -1 z-index on .label, this now seems to work.

Thanks though for your help with the main issue.

[Author]

Posts