0

I am designing a mobile website. On the homepage i have menu items say 'a' ,'b' ,'c',...,'h'. I want to display only first three menu items and make a 'View All Items' button that on clicking expands to show all the items.Also the button should become 'Show Less Items' after clicking on it.

I want to do this using only HTML5 and CSS3 and no JavaScript. Also i want this functionality to be reusable around the website.

How should i do it?

--Thanks in advance!

hkasera
  • 2,118
  • 3
  • 23
  • 32
  • You should stop trying to implement client side interaction logic without using JavaScript. I'd also avoid insisting on specific versions of technologies unless the requirement is for compatibility with older clients (which unfinished drafts are least likely to give you). – Quentin Apr 27 '12 at 10:32
  • I am avoiding Javascript because it doesn't work well with all mobile browsers. – hkasera Apr 27 '12 at 10:48
  • So you're saying you can count on HTML5 but not on JavaScript?!? – tzerb Apr 27 '12 at 11:00
  • You're unlikely to be able to build something that works on all mobile browsers, ever. Even as you finish it there will be new browser versions released. – Ian Devlin Apr 27 '12 at 11:56
  • I suspect that if you find any hacks to achieve this, fewer mobile browsers will support them then a JavaScript solution. – Quentin Apr 27 '12 at 12:46

2 Answers2

1

Modern mobile browsers all support JavaScript, but give end users (at least in Android's case, not sure about iOS) a configuration setting to disable it.

Your best bet as a developer is to use the "fail safe" strategy: Ship the HTML with the menu fully expanded, and use JavaScript to collapse the menu immediately on load (or on DOM ready). That way, if you have mobile users with JavaScript disabled, they will see the whole menu. Most of your users should have JavaScript enabled, in which case they will get the expand/collapse functionality you describe.

emackey
  • 11,818
  • 2
  • 38
  • 58
0

It's unrealistic to expect to implement this without JavaScript, and if you can find a workaround I don't believe it to be as stable as simply using JavaScript. In terms of hiding the menu items you could set their CSS property to display: none; and place a button which targets these menu items and toggles their display property.

Jack
  • 15,614
  • 19
  • 67
  • 92