CODEWITHSUNDEEP
csswordpressonclickshow-hide
Sue.My.Chin
Sue.My.Chin

Reputation: 92

How to show/hide content on click with CSS

I have put together this simple code for showing/hiding some content on click using CSS only. It works as I want it to in FF but wont work in Chrome or Safari (untested as yet in IE)

http://jsfiddle.net/fW3yW/

Can someone please tell me why it wont work in these browsers and suggest an alternative (using CSS only if possible)?

Here is the site where the code is being used - http://www.themontessoripeople.co.uk/montesori/?page_id=20#policies-list

Upvotes: 2

Views: 8199

Answers (4)

Belladonna
Belladonna

Reputation: 3862

Added tabindex, works in Chrome: http://jsfiddle.net/fW3yW/1/

From here: css focus not working in safari and chrome

jQuery method: http://jsfiddle.net/fW3yW/12/

Upvotes: 4

Mark Adams
Mark Adams

Reputation: 184

Use jQuery instead...way more reliable and elegant.

http://www.w3schools.com/jquery/jquery_hide_show.asp

Upvotes: 0

Dai
Dai

Reputation: 155438

You're abusing CSS. The :focus psuedo-class is meant for styling form elements that have focus, rather than for <a> links, where browsers might implement :focus differently, and then there's also the similar :active psuedo-class.

I suggest you do not hide anything by default with CSS, but use jQuery to hide the elements on-load, then use jQuery to create show/hide animations (easily done with a single line of code) when a link is clicked. It's a lot more elegant and works on more browsers.

Upvotes: 2

user1634459
user1634459

Reputation:

You're using a CSS3 selector, with an XHTML doctype. I don't know that all browsers will handle CSS3 with an XHTML doctype tag - though the two specs aren't necessarily tied together.

Have you tried changing the doctype to indicate HTML5? (Then, of course, that brings up all kinds of HTML5shim questions...)

Upvotes: 0

Related Questions