0

I am having a small login form and want to display it in case JavaScript is disabled. Form has similar structure :

<a ...href="#"...>Login</a>
<div class="dropdown-menu" style="padding-left:17px; left:-70px; width:200px;">
<form action="/login/" method="post" ....>
.... form components ....
</form></div>

div with class "dropdown-menu" has display:none initial. And when click "a" tag or hover it should change to display:block. Found simillar issue here Show hide divs on click in HTML and CSS without jQuery but there are solution only for label and using tabindex and :focus.

Done Thanks to @Florian i've fixxed my problem. Here is code if someone is interested.

in .html file

<a class="dropdown-toggle" style="display:none" href="#" data-toggle="dropdown" id="navLogin">Login</a>

<input type='checkbox' style='display: none' id=cb>
<label class="dropdown-toggle" id="labelLogin" for=cb>Login</label>

<div class="dropdown-menu" style="padding-left:17px; left:-70px; width:200px;">
    <form ...... >
         ... Form Components...
    </form>
</div>

in .css file

input:checked + label + div { display: block; }
label {position: relative;

padding: 10px 15px;
color:#428bca;
}

And in .js File

$('#navLogin').removeAttr('style');
$('#labelLogin').css('display', 'none');

Following code will show "a" tag when JavaScript is enabled and will show only label when it's disabled.

Community
  • 1
  • 1
user3799263
  • 35
  • 8

2 Answers2

0

Use noscript like this:

 <noscript>
    <style>
       #noscript{display:none !important;}
       #container{display:none;}
    </style>
 </noscript>
idmean
  • 14,540
  • 9
  • 54
  • 83
Mary Daisy Sanchez
  • 947
  • 1
  • 12
  • 26
0

You need something that you can toggle. Beside javascript the only way to change some state in a html page is the checkbox element. With some tricks this can be used to show/hide other elements.

Have a look at this example http://jsfiddle.net/gSPqX/1/ (Not created by myself). It is a bit simpler than the solution you linked and also uses a div.

Basically the trick is to use the + Operator in the css code which selects next sibling element. 

input:checked + label + div { display: none; }

(Taken from the fiddle)

So you have three elements, the checkbox-input, the label and the div. The checkbox is used to save the current state, the label is used to have a larger clickable area and the div contains the actual data.

Florian
  • 165
  • 1
  • 6
  • and should i hide "a" tag when JS is disabled and show input and label ? – user3799263 Sep 04 '14 at 08:25
  • If you are just talking about the appearance, you can style the label tag and also add the hover effect, so that there is no visual difference. Have a look at the forked fiddle: http://jsfiddle.net/sp4ot4p2/ – Florian Sep 04 '14 at 08:32
  • When clickng on "a" tag it does nothing. – user3799263 Sep 04 '14 at 08:35
  • I edited the post and updated the link, make sure you use the current version (no a-tag included anymore) – Florian Sep 04 '14 at 09:43