Hot to show/hide a
by clicking tag when JavaScript is disabled?

Question

Use tag to show/hide div when click when JavaScript is disabled. Tried adjusting following example Show hide divs on click in HTML and CSS without jQuery but that doesn't seem to work.

From this question How to detect if JavaScript is disabled? i assumed that there isn't a convenient way to check if JS is disabled like:

if(JS is disabled){
     // show <a> tag that words with jQuery to display div
} else {
    // show label to show/hide div onclick
}

Any ideas will be welcomed.

Question How to make "a" tag to show a mini login form stored in "div" when JavaScript is disabled. Because when it's enabled it ?

Below is coresponding code of tag "a" and "div".

<ul class="nav nav-bar pull-right" >
<li class="dropdown" id="menuLogin">

<a class="dropdown-toggle" href="#" for="_1" data-toggle="dropdown" id="navLogin">Login</a>
<div class="dropdown-menu" style="padding-left:17px; left:-70px; width:200px;">
    <?php 
        $form_sm = $this->form_sm;
        $form_sm->prepare();
        echo $this->form()->openTag($form_sm);
    ?>

    <dl class="form">
    <dd><?php
            echo $this->formElement($form_sm->get('email'));
            echo $this->formElementErrors($form_sm->get('email'));
        ?></dd>
    <dd><?php
            echo $this->formElement($form_sm->get('password'));
            echo $this->formElementErrors($form_sm->get('password'));
        ?></dd>
    <li class="divider" style="width:78%"></li>
    <dd><?php
            echo $this->formElement($form_sm->get('send'));
            echo $this->formElementErrors($form_sm->get('send'));
        ?></dd>
   <?php echo $this->form()->closeTag() ?>      
</div>

</li>
</ul>

It uses a Bootstrap3 and Zend Framework components and by clicking "a" tag following line

<li class="dropdown" id="menuLogin">

change to

<li class="dropdown open" id="menuLogin">

This might be one of those cases where you have to rethink your decision to have a div hide. I don't think disabling javascript is something people do too much anymore. — C Bauer, Sep 02 '14 at 21:23
You can use checkbox hack it is css's click function in my way. http://css-tricks.com/the-checkbox-hack/ — DifferentPseudonym, Sep 02 '14 at 21:24
If you've disabled Javascript, your next best bet would be to use PHP to determine whether to hide or show it - you'll have to reload the page though. — scrowler, Sep 02 '14 at 21:27
I would look for a solution that would have the same html for both cases; I don't see why it should be different and if you really need it, you can use javascript to manipulate the DOM after it has been loaded. — jeroen, Sep 02 '14 at 21:30
Agreed @C Bauer....so much more effort when user has no JS, but these users are definitely in the very tiny minority. As developers, should we roughly double our design effort for the 1 user in 5000 (or whatever number it is)? I say no — The One and Only ChemistryBlob, Sep 02 '14 at 21:31
possible duplicate of [How to detect if JavaScript is disabled?](http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled) — The One and Only ChemistryBlob, Sep 02 '14 at 21:41
@ The One and Only ChemistryBlob div that i want to show/hide is a small login form. — I M, Sep 03 '14 at 05:20
I know that there aren't a lot of people who doesn't use JS but this option should also be provided unfortunatelly. — I M, Sep 03 '14 at 05:22
@ The One and Only if you have an example please write it down. — I M, Sep 03 '14 at 17:21

score 0 · Answer 1 · answered Sep 02 '14 at 21:59

You can use checkbox hack to do it. Since it is pure CSS there are some limitations. The elements you want to hide have to be siblings or children of the label you will use so you can select them when you get the :checked status. You can't go up to a element's parent in CSS.

Here is an example: http://jsfiddle.net/carloscalla/msaccf9w/

HTML:

<label class="hide_action" for="chk1">Action toggle</label>
<input id="chk1" type="checkbox" />
<div>Sibling div</div>

CSS:

.hide_action{
  display:block;
  background-color: yellow;
}
.hide_action + input{ /* or #chk1 */
  display:none;
}
.hide_action + input + *{ /* or #chk1 (selector for what you want to hide) */
  display:none;
}
.hide_action + input:checked + *{ /* or #chk1:checked (selector for what you want to hide) */
  display:block;
}

You can not go up a parent and hide other element since you won't be able to get a selector for it. You can go down in children or siblings.

In this example I use + input to select the adyacent input to the label if you don't want them to be together you can identify it by an id as in the CSS comments.

Hot to show/hide a by clicking tag when JavaScript is disabled?

1 Answers1

Hot to show/hide a
by clicking tag when JavaScript is disabled?