Jump to content

Hide Info By Default, But Display It By Default If Javascript Is Not Enabled

phdphd

By phdphd
in Javascript Help

Recommended Posts

phdphd Advanced Member

phdphd

Posted
Posted

Hi All,

 

I have a series of titles to which detailed info is associated, as well as a button that allows to display this info, then to hide it. By default, detailed info is hidden.

 

The problem is that if javascript is disabled, only the titles display, with no means for the user to display detailed info. I would like detailed info to display by default if JS is not enabled on the user's PC.

 

I unsuccessfully tried to find a way to automatically modify the 'display:none' setting of the div section of the detailed info when JS is disabled.

 

Thanks for you help.

phdphd Advanced Member

phdphd

Posted
  • Author
Posted

Here is the complete code.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 <title>Display/Hide div in javascript</title>
 <script>
	 function display_hide(id)
	 {
		 if(document.getElementById(id).style.display=="block")
			 {
			 document.getElementById(id).style.display="none";

	 document.getElementById('button_'+id).value='+';
			 }
		 else
			 {
			 document.getElementById(id).style.display="block";

	 document.getElementById('button_'+id).value='-';
			 }
		 return true;
	 }
</script>
<noscript><style>donotdisplay { display:none; }</style></noscript>
</head>
<body>

<br />Title1<donotdisplay> <input type="button" id="button_text1" onclick="javascript:display_hide('text1');" value="+" /></donotdisplay><div style="display: none" id="text1" > Detailed info related to title1</div><br />Title2<donotdisplay> <input type="button" id="button_text2" onclick="javascript:display_hide('text2');" value="+" /></donotdisplay><div style="display: none" id="text2" > Detailed info related to title2</div><br />Title3<donotdisplay> <input type="button" id="button_text3" onclick="javascript:display_hide('text3');" value="+" /></donotdisplay><div style="display: none" id="text3" > Detailed info related to title3</div><br />Title4<donotdisplay> <input type="button" id="button_text4" onclick="javascript:display_hide('text4');" value="+" /></donotdisplay><div style="display: none" id="text4" > Detailed info related to title4</div>



</body>
</html>

 

I tried to use a <noscript></noscript> tag with some php in it to clear style="display: none" but this does not work.

 

Thanks

kicken Prolific Member

kicken

Posted
Posted

Do not set display:none in your CSS at all.  Apply that style later with JS after the dom has loaded.  One generic way to accomplish this is to define a css class called .has-js or similar which gets applied to the body on dom ready, then use that to apply your hidden styles.  for example:

 

<style type="text/css">
.has-js .hide-if-js { display: none; }
</style>

<script type="text/javascript">
//Use jquery to run a function on dom ready and add the has-js class.
$(function(){ 
  $('body').addClass('has-js');
});
</script>

<div>
  <h1>Some title here</h1>
  <p class="hide-if-js">blah blah blah</p>
</div>

 

 

With the above, the P tag will only get the display:none if one of it's parent's has the .has-js class applied to it.  The .has-js class will then be applied to the body tag, but because it is applied via JS, it is only applied if JS is enabled.

 

phdphd Advanced Member

phdphd

Posted
  • Author
Posted

Hi Kicken,

Thank you for your quick reply and solution.

However, as shown below I enclosed the div section between the html "body" tags to make P a child of Body and it still does not work.

 

<html>
<head>
<title>Untitled</title>
<style type="text/css">
.has-js .hide-if-js { display: none; }
</style>
<script type="text/javascript">
//Use jquery to run a function on dom ready and add the has-js class.
$(function(){
$('body').addClass('has-js');
});
</script>
</head>
<body>
<div>
<h1>Some title here</h1>
<p class="hide-if-js">blah blah blah</p>
</div>
</body>
</html>

I am quite new to JS. There must be something obvioulsy wrong/missing to gurus that I am still not aware of :happy-04: . I would much appreciate your help again. Thanks.

codefossa Member

codefossa

Posted
Posted

It does work, but you didn't include jQuery.

The example he gave: http://xaotique.no-ip.org/tmp/35/

 

Add the jQuery include in the HEAD.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

 

You should also wrap your JS in a load trigger function. In jQuery, you can just use $.ready().

 

$(document).ready(function()
{
$("body").addClass("has-js");
});

Christian F. Member

Christian F.

Posted
Posted

You need to wait for the document to be ready before running the code to apply the class, otherwise the body-element will not have been created yet. If you're using jQuery, then this is done with the .ready () method.

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.