0

How to implement two buttons, "short" and "detailed"? "short" should be the default and show one version of the page. Upon clicking the "detailed" button, another version of the page should be showed.

Since this is a bit difficult to explain, perhaps see the example below.

example page:

requirements:

  • does not totally make content inaccessible without javascript (while noscript is activated)
  • works in major modern browsers

ideally:

  • works without javascript (while noscript is activated)
1

1 Answer 1

0

You can use Css to achieve show hidden content. Css has a property called display that can be set to none or block. We can use focus to detect click on a element.Below is just a dummy example. You can try to achieve same.

CSS

body { display: block;} .span3:focus ~ .alert { display: none;} .span2:focus ~ .alert { display: block;} .alert{display:none;}

HTML

<span class="span3" tabindex="0">Short</span> <span class="span2" tabindex="0">Detailed</span> <p class="alert" >This is hidden</p>

Please check the jsfiddle https://jsfiddle.net/nnodjtf2/

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.